多系列线条颜色

Question

我有以下实现。它已实施并发挥作用。 http://dojo.telerik.com/uCIhu

但是，我想知道是否可以在等级为 data[i]<60 使其变为红色，data[i]>=60 使其变为蓝色时更改线条颜色。

$("#chart").kendoChart({
    series: [{
            name: "Grading",
            color: function(point){return point.value<60 ? "red" : "blue"; },
            width: 1,
            size: 2,
            tooltip: {
                visible: true,
            },
            data: [81, 91, 61, 55, 59, 43, 57, 59, 66, 65, 54, 70, 72.37]}
       ],
   seriesDefaults: {
            type: "line",
            missingValues: "interpolate"

        },
});

Answer 1

是的，这是可能的，但是您发布的代码无法运行：

function lineColor()
{
  for(i=0;i<data.length;i++){ 
   if{data[i]<60}
    color="red";
   else{color="blue";}
   }
}

尝试：

function lineColor(){
  for(i=0; i<data.length; i++){ 
    if(data[i]<60) {color="red";}
    else {color="blue";}
  }
}

或者只是一个简单的三元组：

function lineColor(){
  for(i=0; i<data.length; i++){ 
    color=data[i]<60) ? 'red' : 'blue';
  }
}

我假设范围链中有一些标识符 color。

编辑：

The official documentation 表示应该将 series.color 设置为一个函数，
在你的情况下：color: function(point){return point.value<60 ? "red" : "blue"; }
但是，我不知道为什么这在您的 jsfiddle 中不起作用。

Answer 2

在一条线上获得多种颜色的方法是应用渐变作为描边颜色。在 HTML 的某处，您可以包含一个隐藏的 svg 元素，其中定义了渐变，例如：

  <div style="height: 0px;">
    <svg>
      <defs>    
      <linearGradient id="theGrad" x1="0" x2="0" y1="0" y2="1">
        <stop stop-color="blue" offset="0%"></stop>
        <stop stop-color="blue" offset="40%"></stop>
        <stop stop-color="red" offset="40%"></stop>
        <stop stop-color="red" offset="100%"></stop></linearGradient>
    </defs>
    </svg>
  </div>

注意：您也可以只在脚本中创建渐变定义并将其附加到图表 SVG。

然后使用图表小部件的渲染回调将渐变应用于线条：

$("#chart").kendoChart({
    series: [{
       name: "Grading",
       color: function(point){return point.value<60 ? "red" : "blue"; },
       width: 2,
       size: 2,
       tooltip: {
           visible: true,
       },
       data: [81, 95, 61, 55, 59, 5, 57, 59, 66, 65, 54, 70, 72.37]}
   ],
   seriesDefaults: {
       type: "line",
       missingValues: "interpolate"     
   },
   valueAxis: {
       max: 100
   },
   render: function(e) {
       $('#chart svg g [clip-path="url(#kdef2)"] path').css("stroke", "url(#theGrad)");        
   }
});

不幸的是，kendo 图表没有将 ids 或类应用到各种 svg 元素，因此在浏览器开发人员工具中进行了一些试验和 error/looking 来找出一个合适的选择器。

DEMO

另外对于你的实际问题，你需要根据你的实际数据范围计算出合适的梯度停止

多系列线条颜色

Multiple Series Line Color

javascript

kendo-ui

kendo-chart