Многоцветная серия Цвет линии

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

Способ получения нескольких цветов на одной линии - применять градиент в качестве цвета штриха. Где-то в вашем 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)");   
    } 
}); 

К сожалению, кендо диаграмма не применяется идентификаторов или классов различных SVG элементов, так что некоторые испытания и ошибка/поиск в инструментах разработчика браузера для определения подходящего селектора.

DEMO

Кроме того, для вашей конкретной проблемы, вы Виль необходимо рассчитать соответствующие остановки градиента на основе вашего фактического диапазона данных.

Answer 2

Да, это возможно, однако код, который вы выложили не может работать:

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

Try:

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 в сфере действия.

---

Edit:

The official documentation утверждает, что следует установить в series.color к функции,
в вашем случае: color: function(point){return point.value<60 ? "red" : "blue"; }
Однако, я не имею ни малейшего представления, почему это не работает в вашей jsfiddle.