HighCharts动态更改图表类型 [英] HighCharts Dynamically Change Chart Type

查看:857
本文介绍了HighCharts动态更改图表类型的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在ASP.NET网站中使用HighCharts 2.2.3。
查看 http://jsfiddle.net/wergeld/TDLvc/ 查看代码示例。
我的网站设置与jsFiddle显示的有点不同。
我的函数在一个包含的JS文件中存在,并且对函数的调用与图表创建JS代码不是在线的(尽管它仍然被包装在一个准备好文档的jquery中) p>

我有两个问题,其中一个可以在jsFiddle中看到。
1)更改图表类型时,看起来yAxis名称会丢失。您可以看到我最初有2个yAxis,并且在更改图表类型后,顶部轴不再具有值标签(意味着图表数据仅使用底部轴(第一个yAxis))。
2)当在FF或者IE下运行这个时,我会在调用这个行的时候得到一个错误:

  data:serie .options.data 

错误是:
c不是构造函数
Line 55
in highcharts.js(这是min-ed文件)。

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

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



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

解决方案

这个问题是我们下拉值的大小写。改变了检查:

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


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).

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:

data: serie.options.data

The error is: c is not a constructor Line 55 in highcharts.js (this is the min-ed file).

Using highcharts.src.js I can now see that the error is: typeClass is not a constructor

This is on line 8789 in the src.js: serie = new typeClass();

See updated jsFiddle: select Point as chart type: http://jsfiddle.net/wergeld/nS4Ny/1/. This will throw that error.

解决方案

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

这篇关于HighCharts动态更改图表类型的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆