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

В данных есть свойство объекта с именем clr, которое фактически содержит информацию о цвете соответствующего объекта. Я хотел бы нарисовать одну линию с несколькими цветами. Однако до сих пор я не мог заставить его работать.

Вот небольшой образец моего набора данных.

{x: 11,y: 599,k: 500,clr:'blue'}, { x: 6,y: 699,k: 800,clr:'yellow'}

Вот пример кода, который, как я ожидал, будет работать:

series: [{data: mydata,color: mydata.clr}],

http://jsfiddle.net/epvg86qu/19/


javascript jquery telerik kendo-ui kendo-chart
person casillas    schedule 11.05.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Как упоминалось здесь, Параметр colorField поддерживается, когда для параметра series.type задано значение «bar», «column», «bubble», «пончик», «пирог», «подсвечник», «ohlc» или «водопад».

Кажется, единственный способ сделать это — создать несколько серий. См. скрипку: http://jsfiddle.net/53ygp9ut/2/

function createChart() {
    $("#chart").kendoChart({
        xAxis: {},
        yAxis: {},
        seriesDefaults: {type: "scatterLine" },
        series: [{data: stats1, color: "blue"},
                 {data: stats2, color: "yellow"},
                 {data: stats3, color: "red"}],
    });
}

$(document).ready(createChart);
person Nicholas    schedule 11.05.2015
comment
Но линии не связаны, если я это сделаю. - person casillas; 12.05.2015
comment
Да, это небольшая проблема, я думаю. Однако вы можете изменить источник данных, чтобы заставить их подключаться. Пожалуйста, проверьте обновленную скрипту. - person Nicholas; 12.05.2015
comment
Привет Вася, спасибо за усилия. Однако проблема, которая у меня сейчас есть, как разделить их на серии и добавить последний объект к первому объекту, чтобы соединить их. Это становится сложным. - person casillas; 12.05.2015
comment
Да, вам нужно продублировать последний объект и добавить его в качестве первой части следующей серии. Это может быть сложно или нет, в зависимости от того, как настроена ваша бизнес-логика. - person Nicholas; 12.05.2015
comment
если я не получу лучшего решения, я отмечу ваш ответ. Большое спасибо еще раз. - person casillas; 12.05.2015
comment
это должен быть ответ - person Dion Dirza; 12.05.2015

arrow_upward
2
arrow_downward

Измените свою функцию, чтобы она выглядела так, вы должны указать Кендо использовать поле цвета:

function createChart() {
    $("#chart")
    .kendoChart({
        xAxis: {},
        yAxis: {},
        seriesDefaults: {type: "scatterLine" },
        series: [{data: stats2,colorField: "clr"}],
  })
}

Обновленная скрипта: http://jsfiddle.net/epvg86qu/20/

person Rick S    schedule 11.05.2015
comment
Спасибо, Рик, но изменилось только marker color, а не line color. Я пытаюсь изменить line color. Я проголосовал за ваши усилия. - person casillas; 11.05.2015
comment
Спасибо, я все еще ищу ответ. Пока не повезло. - person Rick S; 11.05.2015
comment
Большое спасибо @Rick S. - person casillas; 11.05.2015