带有多个彩色线段的​​折线图

Question

我正在使用Ext 5，并希望根据值对折线图中的线段进行着色。如果值大于目标，则显示绿色线，否则为红色。

有没有办法根据其值来改变Ext line chart中线段的颜色？

我可以发现，在link

中，没有内置的方式在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'
        }]
    });
});

Answer 1

实际上，改变整行的颜色（在每个指标之间）并不难。问题是如何改变部分线的颜色。为了解决这个问题，我创建了数据边界（推送边界项来存储）。我不确定这对你有用。不幸的是，除此之外我什么都不知道。无论如何，请检查这个小提琴：https://fiddle.sencha.com/#fiddle/v0d

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'
            }]
        });