Highchart: Wie wird ein Balken im Balkendiagramm nach Daten erhöht?

Question

-Code in Sorge: 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] 
    }] 
    }); 
}); 

(. Hinweis: Diese JSFiddle nur zu Demonstrationszwecken ist)

Ich möchte ein Balkendiagramm mit Bars mit animierten Inkrementierung haben (dh nur der Teil erhöht) anstatt die ganze Leiste neu zu zeichnen.

Vielen Dank im Voraus.

Answer 1

Sie können so etwas tun.

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

Sie können die Demo here sehen.