2016-08-09 24 views
10

Kodu: http://jsfiddle.net/h6qrbpwo/10/Highchart: çubuk grafikte, veriye göre çubuğun nasıl artırılacağı? endişe içinde

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

(Not:. Bu JSFiddle sadece gösteri amaçlıdır)

Ben (yani sadece bir parçası artmış) animasyonlu incrementation ile çubuklarla çubuk grafik istiyorum tüm çubuğu yeniden çizmek yerine.

Şimdiden teşekkürler.

+1

Merhaba, Yeni seri eklemek yerine Point.update() kullanımı hakkında ne düşünüyorsunuz? Şu örneğe bakın: http://jsfiddle.net/h6qrbpwo/14/ –

+0

@ GrzegorzBlachliński Teşekkürler! Bunu düşünmedim. – Aqqqq

+0

Çubuk grafiğin tüm serileri eklemekten başka bir bar/veri noktası eklemesi mümkün mü (animasyondan kurtulmaksızın (bu yüzden bu bağlamda addPoint kullanılamaz))? – Aqqqq

cevap

0

Böyle bir şey yapabilirsiniz.

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

Demoyu here görebilirsiniz.