Question

我有一堆图表，默认情况下，以线图形式出现。我在图表的侧面添加了按钮，允许用户将其更改为饼图，条形图，区域图线或返回线。

当用户点击该按钮时，它会运行此功能：

function change_graph_type(moduleNumber, type) {

  graph_type = type;

  var chart    = $('#graph' + moduleNumber).highcharts();

  for ( i=0;i<chart.series.length;i++ ) {
    chart.series[i].update({
      type      : graph_type
    });
    //chart.redraw();  //I've tried adding this here to no avail...
  } 
}

代码会更改每个系列。 - line to bar，或bar to areaspline，但当用户切换到新图表类型时，我无法弄清楚如何获取“动画”，因此它只在用户第一次生成图表时运行。

Answer 1

我尝试了很多方法但是没有这样的功能在animation之后触发redraw

所以在下面创建了这个快速而又脏的方法，这可能会有所帮助

http://jsfiddle.net/msekpj8m/

$(function() {
    var chartOptions = {
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            showEmpty: false
        },
        chart: {
            type: 'column'
        },
        yAxis: {
            showEmpty: false
        },

        series: [{
            allowPointSelect: true,
            data: [ // use names for display in pie data labels
                ['January', 29.9],
                ['February', 71.5],
                ['March', 106.4],
                ['April', 129.2],
                ['May', 144.0],
                ['June', 176.0],
                ['July', 135.6],
                ['August', 148.5], {
                    name: 'September',
                    y: 216.4,
                    selected: true,
                    sliced: true
                },
                ['October', 194.1],
                ['November', 95.6],
                ['December', 54.4]
            ],
            marker: {
                enabled: false
            },
            showInLegend: true
        }]
    };
    var container = $('#container');
    container.highcharts(chartOptions);

    // Set type
    $.each(['line', 'column', 'spline', 'area', 'areaspline', 'scatter', 'pie'], function(i, type) {
        $('#' + type).click(function() {
            container.highcharts().destroy();
            chartOptions.chart.type = type;
            container.highcharts(chartOptions);
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

<button id="column" style="margin-left: 2em">Column</button>
<button id="line">Line</button>
<button id="spline">Spline</button>
<button id="area">Area</button>
<button id="areaspline">Areaspline</button>
<button id="scatter">Scatter</button>
<button id="pie">Pie</button>

在更改图表类型

1 个答案: