Javascript 多色线段折线图

我正在使用Ext5，并希望根据这些值为折线图中的线段着色。如果值大于目标值，则以绿色显示线，否则为红色

是否有任何方法可以根据其值更改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'
        }]
    });
});

---

事实上，改变整条线的颜色（每米之间）并不难。问题是如何更改部分线的颜色。为了解决这个问题，我创建了数据边界（将边界项推送到存储）。我不确定这对你是否有用。不幸的是，除了这个我什么都不知道。无论如何，请检查这把小提琴：

var数据=[{
'name'：'metric one'，
“数据2”：4
}, {
'name'：'metric two'，
“数据2”：8
}, {
'name'：'metric three'，
“数据2”：20
}, {
'name'：'metric four'，
“数据2”：12
}, {
'name'：'metric five'，
“数据2”：18
}, {
'name'：'metric six'，
“数据2”：24
}, {
'name'：'metric seven'，
“数据2”：36
}];
var newData=[]；
Ext.each（数据、函数（dt、索引）{
newData.push（dt）；
if（（index！=data.length-1）和&dt.data2<14和&1414）{
changes.strokeStyle='绿色'；
}否则{
changes.strokeStyle='red'；
}
回报变化；
},
xField:'名称'，
yField:“数据2”
}]
});

我已经试过了。但是，由于我的x轴代表日期而不是数值，我无法自定义小提琴中显示的数据。@Gilsha为了绘制图形，您可以轻松地将日期转换为数字，反之亦然。如果您使用的是JavaScript内置的

Date

，则转换方法为和。

var data = [{
            'name': 'metric one',
            'data2': 4
        }, {
            'name': 'metric two',
            'data2': 8
        }, {
            'name': 'metric three',
            'data2': 20
        }, {
            'name': 'metric four',
            'data2': 12
        }, {
            'name': 'metric five',
            'data2': 18
        }, {
            'name': 'metric six',
            'data2': 24
        }, {
            'name': 'metric seven',
            'data2': 36
        }];
        var newData = [];
        Ext.each(data, function(dt, index) {

            newData.push(dt);
            if((index != data.length-1) && dt.data2 < 14 && 14 < data[index+1].data2) {
               newData.push({'data2': 14, name: index});
            }     
        });

        Ext.create('Ext.chart.Chart', {
            renderTo: Ext.getBody(),
            width: 500,
            height: 300,
            store: {
            fields: ['name', 'data2'],
                data: newData
            },
            axes: [{
                type: 'numeric',
                position: 'left',
                fields: ['data2'],
                title: {
                    text: 'Sample Values',
                    fontSize: 15
                },
                grid: true,
                minimum: 0
            }, {
                type: 'category',
                position: 'bottom',
                fields: ['name'],
                title: {
                text: 'Sample Values',
                fontSize: 15
            }
            }],
            series: [{
                type: 'line',
                style: {
                    lineWidth: 2,
                    maxBarWidth: 30,
                    stroke: 'red'
                },
                renderer: function(sprite, config, rendererData, index) {

                    var store = rendererData.store,
                    storeItems = store.getData().items,
                    record = storeItems[index],
                    prev = storeItems.length - 2,
                    last = storeItems.length - 1,
                    changes = {};
                    if (!record) {
                        return;
                    }
                    if (record.get('data2') > 14) {
                        changes.strokeStyle = 'green';
                    } else {
                        changes.strokeStyle = 'red';
                    }
                    return changes;
                },
                xField: 'name',
                yField: 'data2'
            }]
        });