javascript HighCharts 动态改变图表类型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10657588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HighCharts Dynamically Change Chart Type
提问by wergeld
Using HighCharts 2.2.3 in an ASP.NET site. See http://jsfiddle.net/wergeld/TDLvc/for code example. My site setup is a little different than what the jsFiddle shows. My function to change the series exists in an included JS file and the call to the function is not "in-line" with the chart creation JS code (although it is still wrapped in a document ready jquery).
在 ASP.NET 站点中使用 HighCharts 2.2.3。有关代码示例，请参阅http://jsfiddle.net/wergeld/TDLvc/。我的站点设置与 jsFiddle 显示的略有不同。我更改系列的函数存在于包含的 JS 文件中，并且对该函数的调用与图表创建 JS 代码不“内嵌”（尽管它仍然包含在文档就绪的 jquery 中）。
I have two issues and one of which can be seen in the jsFiddle. 1) When changing chart type it looks like the yAxis designation gets lost. You can see I have originally 2 yAxis and after you change the chart type the top axis no longer has value labels (means that the chart data is using only the bottom axis (first yAxis)). 2) When running this under FF or IE I get an error on the line that calls:
我有两个问题，其中一个可以在 jsFiddle 中看到。1) 更改图表类型时，yAxis 名称似乎丢失了。您可以看到我最初有 2 个 yAxis，在更改图表类型后，顶部轴不再具有值标签（意味着图表数据仅使用底部轴（第一个 yAxis））。2) 在 FF 或 IE 下运行时，我在调用的行上收到错误：
data: serie.options.data
The error is: c is not a constructor Line 55 in highcharts.js (this is the min-ed file).
错误是：c 不是 highcharts.js 中的第 55 行（这是 min-ed 文件）中的构造函数。
Using highcharts.src.js I can now see that the error is: typeClass is not a constructor
使用 highcharts.src.js 我现在可以看到错误是：typeClass 不是构造函数
This is on line 8789 in the src.js: serie = new typeClass();
这是在 src.js 中的第 8789 行： serie = new typeClass();
See updated jsFiddle: select Point as chart type: http://jsfiddle.net/wergeld/nS4Ny/1/. This will throw that error.
请参阅更新的 jsFiddle：选择 Point 作为图表类型：http: //jsfiddle.net/wergeld/nS4Ny/1/。这将抛出该错误。
采纳答案by wergeld
This issue is the capitalization of our drop-down values. Changed the check to do:
这个问题是我们下拉值的大写。将检查更改为：
newType = newType.toLowerCase();
Now chart type changes great take effect. Full code:
现在图表类型更改极大地生效。完整代码：
function changeType(chart, series, newType) {
newType = newType.toLowerCase();
for (var i = 0; i < series.length; i++) {
series = series[0];
try {
series.chart.addSeries({
type: newType,
stack: series.stack,
yaxis: series.yaxis,
name: series.name,
color: series.color,
data: series.options.data
},
false);
series.remove();
} catch (e) {
alert(newType & ': ' & e);
}
}
}
回答by Sheldon Neilson
For anyone that stumbles accross this... You must remove the chart series' from last to first. Also remember to redraw on the last series or your changes will not be displayed:)
对于遇到此问题的任何人......您必须从最后到第一个删除图表系列。还要记住在最后一个系列上重新绘制，否则您的更改将不会显示:)
function changeChartType(chart, type, redraw) {
var seriesOptions = new Array(chart.series.length);
for (var i = 0; i < chart.series.length; i++) {
var series = chart.series[i];
seriesOptions[i] = {
type: type,
name: series.name,
color: series.color,
dashStyle: series.options.dashStyle,
lineWidth: series.options.lineWidth,
marker: series.options.marker,
dataLabels: series.options.dataLabels,
enableMouseTracking: series.options.enableMouseTracking,
data: series.options.data,
isRegressionLine: series.options.isRegressionLine
};
}
for (var i = chart.series.length - 1; i >= 0; i--) {
chart.series[i].destroy();
}
for (var i = 0; i < seriesOptions.length; i++) {
var newSeries = chart.addSeries(seriesOptions[i], redraw && i == seriesOptions.length - 1);
}
chart.currentType = type;
}
