高图:在条形图中，如何根据数据增加条形图

Question

相关代码: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]
    }]
  });
});

(注意:此JSFiddle仅用于演示目的)

我想有一个条形图与条形动画增量(即只有部分增加)，而不是重新绘制整个条形图。

Answer 1

你可以这样做。

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

你可以在这里看到演示