HighCharts 动态改变图表类型答案

【问题标题】：HighCharts Dynamically Change Chart TypeHighCharts 动态改变图表类型
【发布时间】：2012-05-18 18:02:26
【问题描述】：

在 ASP.NET 站点中使用 HighCharts 2.2.3。有关代码示例，请参见 http://jsfiddle.net/wergeld/TDLvc/。我的站点设置与 jsFiddle 显示的有点不同。我的更改系列的函数存在于一个包含的 JS 文件中，并且对该函数的调用不是与图表创建 JS 代码“内联”（尽管它仍然包装在一个文档就绪的 jquery 中）。

我有两个问题，其中一个可以在 jsFiddle 中看到。 1) 更改图表类型时，yAxis 名称似乎丢失了。您可以看到我最初有 2 个 yAxis，并且在您更改图表类型后，顶部轴不再具有值标签（意味着图表数据仅使用底部轴（第一个 yAxis））。 2) 在 FF 或 IE 下运行时，我在调用的行上收到错误：

data: serie.options.data

错误是： c 不是构造函数 55 号线在 highcharts.js 中（这是 min-ed 文件）。

使用 highcharts.src.js 我现在可以看到错误是： typeClass 不是构造函数

这是 src.js 中的第 8789 行： serie = new typeClass();

查看更新的 jsFiddle：选择 Point 作为图表类型：http://jsfiddle.net/wergeld/nS4Ny/1/。这将引发该错误。

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

这个问题是我们下拉值的大写。将检查更改为：

newType = newType.toLowerCase();

现在图表类型更改很大生效。完整代码：

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);
            }
        }
    }

【讨论】：

如果你分享了更新的 fiddle 就好了。是可能的饼图选项。
饼图可能是可能的——我们不关心，因为我们从不使用饼图。不需要更新小提琴 - 因为我回答了我自己的问题并在我的回答中给出了固定代码。
你很好，但如果我可以通过一些事件在饼图和柱形图之间切换会有所帮助，，
是这样吗？它正在破坏series 参数（在series = series[0] 行中）。
是的，这是正确的 - 用于我的测试目的。如果您还想执行所有系列项目，则需要将其设置为 series = series[i]。

【解决方案2】：

对于任何偶然发现此问题的人... 您必须从最后一个到第一个删除图表系列。还记得在最后一个系列上重绘，否则您的更改将不会显示:)

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;
}

【讨论】：