javascript - 更改图表类型并在 Highcharts 中使用多个系列重新绘制

标签 javascript jquery highcharts

我有一个包含各种图表的仪表板,每个图表都有一个相邻的下拉列表来更改图表类型。我希望通过重新绘制图表来实现这一目标,而不是销毁它并创建一个新图表。

我首先偶然发现了一个似乎来自 Highcharts 团队的解决方案,但在调查中,它似乎实际上被破坏了。从选择中选择“列”后,图表将重新呈现,而没有第一个系列数据。我发现这是一个一致的问题...highcharts 只想以使用“addSeries”方法的方式渲染最后一个系列:

for(var i=0;i<series.length;i++)
{
    serie = series[0];
    serie.chart.addSeries({
        type: newType,
        name: serie.name,
        color: serie.color,
        data: serie.options.data
    }, false);

    serie.remove();
}

var chart = new Highcharts.Chart(options, function(chart){

    $('#chartType').change(function(){
        changeType(chart.series, this.value);
    });

});

尝试在此处选择“列”:http://jsfiddle.net/2hLr5/

我还发现有人使用旧版本的 highcharts 和 jQuery 1.7.1 完成了此任务。您可以在这里看到他的工作示例:http://highcharts.com/jsbin/etulob/edit#javascript,live

在复制他的代码供我使用时,我发现 jQuery 1.9.1 会将图表从其原始列复制到折线图,但当尝试从折线图切换回列时,它会卡住。您可以在这里看到:http://highcharts.com/jsbin/etulob/9/edit#javascript,live

我最好的猜测是,自以前版本的 Highcharts 以来,柱形图的数据已经发生了变化,但这完全是在黑暗中进行的。

任何帮助将不胜感激。

最佳答案

查看我之前的回答 here 。它解释了如何使用series.update()函数来更改图表的类型。

关于javascript - 更改图表类型并在 Highcharts 中使用多个系列重新绘制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15890789/

相关文章:

javascript - 填充命令不起作用,我无法在各部分之间留出空格

php - Plupload 不上传文件

highcharts - 在HIghchart本地导出图表图片数据

javascript - Highcharts:当另一个图表上发生点击事件时,如何更改或重绘一个图表?

javascript - three.js:使用 textureloader 加载 svg 从 r78 开始不起作用

javascript - jQuery 在第二次单击时删除类并在第二次单击时禁用悬停

javascript - 获取另一个函数中一个函数在 'this'中设置的变量

javascript - 在不同 DIV 内单击时显示文本

javascript - 保存/提交时使用多个选项的 Jquery 自动完成问题

jquery - 如何使用工具提示格式化程序并仍然显示图表颜色(就像默认情况下一样)?