Highchart: на гистограмме, как увеличивать бар в соответствии с данными?

Код, вызывающий озабоченность: 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 предназначен только для демонстрационной цели.)

Я хотел бы иметь гистограмму с барами с анимированной инкрементацией (т.е. только часть увеличена) вместо перерисовки всей строки.

Спасибо заранее.

ОТВЕТЫ

Ответ 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]
    }]
  });
});

Вы можете увидеть демо здесь.