Highchart: na wykresie słupkowym, jak zwiększać pręt w zależności od danych?

Question

Kod z troską: http://jsfiddle.net/h6qrbpwo/10/

$(function() { 
    var chart; 
    var d = 1; 
    var index = 0; 

    function getYValue(chartObj, seriesIndex, xValue) { 
    var yValue = null; 
    var points = chartObj.series[seriesIndex].points; 
    for (var i = 0; i < points.length; i++) { 
     if(i == points.length - 1 && points[i].x != xValue){  
     return 0; 
     } 
     yValue = points[i].y; 
    } 
    return yValue; 
    } 
    $('#b').click(function() { 
    console.log(index); 
    var d = getYValue(chart, index, 20.5); 
    console.log(d); 
    d++; 
    console.log(d); 
    chart.addSeries({ 
     grouping: false, 
     data: [ 
     [20.5, d] 
     ] 
    }); 
    index ++; 
    }) 
    chart = new Highcharts.Chart({ 
    chart: { 
     type: 'column', 
     renderTo: 'container' 
    }, 
    title: { 
     text: '' 
    }, 
    xAxis: { 
     min: 0, 
     max: 100 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: '', 
     data: [5, 3, 4, 7, 2] 
    }] 
    }); 
}); 

(Uwaga:. To JSFiddle jest tylko dla celów demonstracyjnych)

chciałbym mieć wykres słupkowy z barów z animowanym zwiększania wartości (czyli wzrosła tylko część) zamiast przerysowywania całego paska.

Z góry dziękuję.

Answer 1

Możesz zrobić coś takiego.

$(function() { 
    var chart; 
    var d = 1; 
    var index = 0; 

    function getYValue(chartObj, seriesIndex, xValue) { 
    var yValue = null; 
    var points = chartObj.series[seriesIndex].points; 
    for (var i = 0; i < points.length; i++) { 
     if(i == points.length - 1 && points[i].x != xValue){  
     return 0; 
     } 
     yValue = points[i].y; 
    } 
    return yValue; 
    } 
    $('#b').click(function() { 
     //var newValue = series[0].data[0]; 
    //chart.series[0].points[0].update(100); 
    chart.series[0].addPoint(0, false, false, false); 
    chart.redraw(false); 
    chart.series[0].points[chart.series[0].points.length - 1].update(1); 
    /* 
    console.log(index); 
    var d = getYValue(chart, index, 20.5); 
    console.log(d); 
    d++; 
    console.log(d); 
    chart.addSeries({ 
     grouping: false, 
     data: [ 
     [20.5, d] 
     ] 
    }); 
    index ++; 
    */ 
    }) 
    chart = new Highcharts.Chart({ 
    chart: { 
     type: 'column', 
     renderTo: 'container' 
    }, 
    title: { 
     text: '' 
    }, 
    xAxis: { 
     min: 0, 
     //max: 10 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: '', 
     data: [5, 3, 4, 7, 2] 
    }] 
    }); 
}); 

Możesz zobaczyć demo here.