Zeasts

Question

// Dynamic Chart for bar Chart
$(function () {
  (function(H) { 
    var each = H.each;
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
      var series = this;
      if(series.data.length > 0 ){
        var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
        each(this.data, function(point) {
          point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
          point.shapeArgs.width = width;
        });
      }
      proceed.call(this);
    })


  })(Highcharts)


  var getRandomData = function(size, addition) {
    if (!addition) addition = 5;
    var data = [];
    var len = Math.random() * size + addition;
    var i;
    for (i = 0; i < len; i++) {
      data.push(Math.random() * 50);
    }
    return data;
  };




  $('#bar-charts').highcharts({
    chart: {
      type: 'column'
    },
    series: [{
      maxPointWidth: 50,
      data: getRandomData(5)
    }]
  });

});
$('#reloadBar').click(function () {
  // body...
  $("#bar-charts").highcharts().reflow();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="panel panel-shadow">
  <div class="panel-body">
    <div id="bar-charts"></div>
    <a class="btn btn-success" id="reloadBar"><i class="glyphicon glyphicon-refresh"></i></a>
  </div>
</div>

我试图redraw()高等法院onclilck reload但是没有得到任何输出，不知道我在做什么错误。：？有人可以帮我了解如何获取随机数据onclick reload按钮

继续更新的小提琴链接： unknown

先谢谢

Zeasts

Answer 1

highchart的redraw，使用当前设置和数据重新绘制图表，使用新设置或数据绘制图表，执行以下步骤：

为重新创建图表定义方法：

var resetChart = function(){
   $('#bar-charts').highcharts({
       chart: {
          type: 'column'
       },
       series: [{
         maxPointWidth: 50,
         data: getRandomData(5)
       }]
  });
};

调用方法以开始创建图表。
```
resetChart();
```
定义像bellow一样的点击处理程序，请记住，您应首先使用高图的destroy方法销毁现有图表，然后调用resetChart绘制新图表：
```
$('#reloadBar').click(function () {
    $("#bar-charts").highcharts().destroy();
    resetChart();
});
```

Working Sample On Fiddle

感谢Wilts C，正如他在回答中提到的，如果您只想更改数据，您也可以使用series[index].setData这样的方法：

$("#bar-charts").highcharts().series[0].setData(getRandomData(5),true);

Working Sample On Fiddle With setData

Answer 2

要手动更新Highchart的数据，请使用Series.setData之类的this。

Onclick使用条形图中的新值重绘图表

Zeasts

2 个答案: