Я использую Ext 5 и хотел бы сегментировать цвета в линейной диаграмме на основе значений. Показывать строку в зеленом цвете, если значение больше цели, в противном случае красное.
Можно ли изменить цвет сегмента линии в линейной диаграмме Ext на основе его значения?
Я мог бы найти, что в sencha нет встроенного способа сделать это из ссылка
Я также попытался добавить динамический строп динамически над линией, чтобы повлиять на различные цвета. Это сработало. Но я не смог найти точные координаты x, y, чтобы динамически рисовать эту настраиваемую строку.
Это код, который я пробовал до сих пор.
Ext.onReady(function () {
var data = [{
'date': '1',
'data2': 4
}, {
'date': '2',
'data2': 8
}, {
'date': '3',
'data2': 12
}, {
'date': '4',
'data2': 6
}, {
'date': '5',
'data2': 36
}];
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: {
fields: ['name', 'data2'],
data: data
},
listeners: {
redraw: function(){
var chart = this;
var series = chart.series[0];
var dataRange = series.dataRange;
var large = dataRange.find(function(v){ return v>14 });
if(large){
var line = series.getSurface().add({
type: 'line',
fromX: 354,
fromY: 75,
toX: 465,
toY: 257,
zIndex: 2000,
stroke: 'green',
'stroke-width': 2,
}).show(true);
}
}
},
axes: [{
type: 'numeric',
position: 'left',
fields: ['data2'],
title: {
text: 'Stores Visited',
fontSize: 15
},
grid: true,
minimum: 0
}, {
type: 'category',
position: 'bottom',
fields: ['date'],
title: {
text: 'Date',
fontSize: 15
}
}],
series: [{
type: 'line',
style: {
stroke: 'red',
lineWidth: 2
},
xField: 'date',
yField: 'data2'
}]
});
});