Highcharts：如何更改图的类型 [英] Highcharts: How to Change type of Graph

问题描述

  $（function（）{$ b）我是Highign插图的Highcharts插件$ b $（'＃graph1'）。highcharts（{
图表：{
类型：'bar'
}，
 xAxis：{
类别：mesesGraph1 
}，
 yAxis：{
 title：{
 text：'WO / month'
}，
 plotLines：[{
 value： 0，
 width：1，
 color：'＃808080'
}] 
}，
图例：{
 layout：'vertical'，
 align：'right'，
 verticalAlign：'middle'，
 borderWidth：0 
}，
 series：arrayFocal 
}）; 
}）; 
  

现在我想要一个onclick（）更改我的图表类型的按钮...有没有方法来做到这一点？

解决方案

您可以通过更新类型来更改类型。这是一个适用于普通按钮的例子：

  //设置类型
 $ .each（['line' ，'column'，'spline'，'area'，'areaspline'，'scatter']，function（i，type）{
 $（'＃'+ type）.click（function（）{
 $ .each（chart.series，function（j，series）{
 series.update（{
 type：type 
}）; 
}）; 
}）; 
}）; 
  

正如您所看到的，按钮固定在类型上，onClick中的每个系列都会更新无论您按下哪个按钮。在图形上直接做到这一点很简单，只需设置click事件即可更新系列。

另外，我的图表实例将在你的情况：

  var chart = $（'＃graph1'）。highcharts（）; 
  

I am usign Highcharts plugin for Graphs... this is my code:

$(function () {
            $('#graph1').highcharts({
                chart: {
                    type: 'bar'
                },
                xAxis: {
                    categories: mesesGraph1
                },
                yAxis: {
                    title: {
                        text: 'WO / month'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: arrayFocal
            });
        });

Now I want a button that onclick() changes the type of my graph... is there a way to do this?

解决方案

You can change the type by updating the type. Here is an example that works on normal buttons:

// Set type
$.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter'], function(i, type) {
  $('#' + type).click(function() {
    $.each(chart.series, function(j, series) {
      series.update({
        type: type
      });
    });
  });
});

As you can see, the buttons are anchored on the type and onClick each series in the chart is updated to whichever button you pressed. It's just as easy to do it directly on the graph, you just set the click event to update the series.

Also, my "chart" instance would be the following in your case:

var chart = $('#graph1').highcharts();

这篇关于Highcharts：如何更改图的类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！