Линейная диаграмма с несколькими цветными сегментами

Я использую 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'
        }]
    });
});

введите описание изображения здесь

Ответы

Ответ 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'
            }]
        });