HighCharts 动态更改图表类型

Question

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

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

data: serie.options.data

错误信息为： c不是一个构造函数 在highcharts.js的第55行（这是min-ed文件）。

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

在src.js的第8789行： serie = new typeClass();

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

- wergeld

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

- wergeld

---

如果你能分享更新后的 Fiddle 就好了。饼图选项是否可行？ - Rinzler

饼图可能是可行的 - 但我们从不使用饼图，所以这并不是我们关注的重点。更新代码示例并不是必要的 - 因为我已经回答了自己的问题，并在答案中提供了修复后的代码。 - wergeld

没错，那样也可以，但如果我能通过某些事件在饼图和柱状图之间切换就更好了。 - Rinzler

这是正确的吗？它正在修改 series 参数（在 series = series[0] 行）。 - Matt Fenwick

是的，这是正确的 - 为了我的测试目的。如果您想要处理所有系列项，您需要将其设置为类似于series = series[i]的内容。 - wergeld

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

- Sheldon Neilson