Question

我想在添加新点时更改/自定义highcharts'动画。

series.addPoint([x, y], true, false);

以下是hightcharts的默认动画示例： http://jsfiddle.net/pe4csrr7/ 单击按钮（下一个或上一个），您可以看到新栏位于最后一个栏后面。

我希望看到来自图表外部的条形图，而不是这个默认动画。这是我想要的一个例子：http://jsfiddle.net/smsducrg/（警告：这个例子的动画并不总是一样，一段时间后默认动画会回来，我不知道为什么......）

感谢。

Answer 1

也许您可以使用xAxis.setExtremes（）重新绘制图表，而不是使用chart.redraw（）。 http://api.highcharts.com/highcharts/Axis.setExtremes

我认为通过小技巧，你将能够实现你想要的目标。

$(function() {
  var chart = $('#container').highcharts({
    chart: {
      type: 'column'
    },
    xAxis: {
      categories: ['0', '1', '2', '3', '4', '5', '6']
    },
    series: [{
      data: [1, 1, 1, 1, 1, 1, 1],
      cropThreshold:0
    }]
  });

  $('#prev').attr('start', 0);
  $('#next').attr('end', 6);

  $('#prev').off('click').on('click', function() {
    var next = parseInt($('#next').attr('end'), 10) - 1;
    var prev = parseInt($('#prev').attr('start'), 10) - 1;

    var chart = $('#container').highcharts();
    chart.series[0].addPoint({
      x: prev,
      y: 1
    }, false, false);
    chart.xAxis[0].setExtremes(prev + 1, next)
    chart.xAxis[0].setExtremes(prev, next)

    $('#next').attr('end', next);
    $('#prev').attr('start', prev);
  });


  $('#next').off('click').on('click', function() {
    var next = parseInt($('#next').attr('end'), 10) + 1;
    var prev = parseInt($('#prev').attr('start'), 10) + 1;

    var chart = $('#container').highcharts();
    chart.series[0].addPoint({
      x: next,
      y: 1
    }, false, true);
    chart.xAxis[0].setExtremes(prev, next - 1)
    chart.xAxis[0].setExtremes(prev, next)
    $('#next').attr('end', next);
    $('#prev').attr('start', prev);
  });
});

如果您想在多次点击按钮后也想要播放此动画，则需要添加比默认值更大的cropThreshold（例如，当您添加50点时）。

在这里，您可以看到一个示例：http://jsfiddle.net/pe4csrr7/5/

添加点时的highcharts列动画（series.addPoint（））

1 个答案: