javascript - torta - graficas bootstrap 4

Gráfico de líneas con segmentos de varios colores

Question

Estoy usando Ext 5 y me gustaría colorear segmentos en un gráfico de líneas basado en los valores. Muestre la línea en color verde si el valor es mayor que el objetivo de lo contrario rojo.

¿Hay alguna forma de cambiar el color de un segmento de línea en el gráfico de líneas Ext en función de su valor?

Pude encontrar que no hay una forma integrada de hacer esto en sencha desde este link

También he intentado agregar un sprite de línea dinámicamente sobre la línea para hacer un impacto de diferentes colores. Funcionó. Pero no pude encontrar las coordenadas x, y exactas para dibujar esta línea personalizada de forma dinámica.

Este es el código que he probado hasta ahora.

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

En realidad, cambiar el color de toda la línea (que está entre la métrica) no es difícil. El problema es cómo cambiar el color de la línea de la porción. Para solucionar este problema, creé límites de datos (elementos de límite empujados para almacenar). No estoy seguro de que te sea útil. Lamentablemente, no tengo más idea que esto. De todos modos, por favor revise este violín: 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''
            }]
        });