Question

我想创建一个子弹图，其中有多个目标具有不同的颜色和标签。此刻度间隔应为50.我试过这个http://dojo.telerik.com/iXaSa/2但步骤标签不起作用，不知道如何更改目标的颜色和放置标签。

在这方面的任何帮助将受到高度赞赏。

Answer 1

目标颜色可以是string或function。如果将其定义为函数，它将接收包含该系列信息的参数。此信息中的一项是index，指的是正在显示的系列。

您可以将目标中的color定义为：

target: {
    color: function (arg) {
        var colors = [ "red", "white", "blue" ];
        return colors[arg.index];
    },
    ...
}

在此处将您的代码视为Stack Overflow代码段：

＆＃13;

function createChart() {


  $("#chart-temp").kendoChart({
    legend: {
      visible: true
    },


    series: [{
      type: "bullet",
      data: [[0,40],[0,60],[0,50]],

      target: {
        color: function (arg) {
          var colors = [ "red", "white", "blue" ];
          return colors[arg.index];
        },

        line: {
          width: 5

        }
      }
    }],
    categoryAxis: {
      labels:{
        step:50
      },
      majorGridLines: {
        visible: false
      },
      majorTicks: {
        visible: false
      }

    },

    valueAxis: [{
      plotBands: [{
        from: 0, to: 100, color: "green", opacity: .3
      }],
      majorGridLines: {
        visible: false
      },

      min: 0,
      max: 100,
      minorTicks: {
        visible: false
      }
    }],
    tooltip: {
      visible: false,
      template: "Maximum: #= value.target # <br /> Average: #= value.current #"
    }
  });
}

$(document).ready(function() {
  createChart();
});

＆＃13;

.history {
  border-collapse: collapse;
  width: 60%;
  margin: 0 auto;
}

.history .k-chart {
  height: 65px;            
}

.history td.item {
  line-height: 65px;
  width: 20px;
  text-align: right;
  padding-bottom: 22px;
}

＆＃13;

<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<table class="history">
  <tr>
    <td class="item">temp</td>
    <td class="chart"><div id="chart-temp"></div></td>
  </tr>
</table>

＆＃13;

Kendo UI子弹图多个目标和标签

1 个答案: