jquery - Kendo UI Bullet 图表多个目标和标签

Question

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

在这方面的任何帮助将不胜感激。

Answer 1

目标颜色可能是 astring或 a function。如果您将其定义为一个函数，它会接收一个包含有关系列信息的参数。该信息中的一项index是指正在显示的系列。

您可以color在目标中定义为：

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

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

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();
});

.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;
}

<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>