我正在尝试使用jquery切换图形类型 .
我找到了通过使用函数改变图表类型(无需重新创建新图表)的方法:
series [i] .update({type:chartType});
我的第一个问题是:有一种方法可以改变所有图表,而不仅仅是系列?如果没有继续阅读:)
但是有了这个功能,我无法使'bar'图表正常工作 . 它就像一个柱形图 . 正如您所看到的,馅饼示例正在作为例外工作 .
吧:http://www.highcharts.com/demo/bar-basic
它是如何工作的(示例):
<div id="top10_" style="float:left">
<button id="set_column">column</button>
<button id="set_bar">bar</button>
<button id="set_pie">pie</button>
</div>
<div id="top10" style="min-width: 400px; height: 400px; margin: 0 auto;"></div>
$('#set_column').click(function () {
var chart = $(this).parent('div').attr('id');
chart = chart.replace('_', '');
$('#' + chart).highcharts().series[0].update({
type: "column"
});
});
$('#set_bar').click(function () {
var chart = $(this).parent('div').attr('id');
chart = chart.replace('_', '');
$('#' + chart).highcharts().series[0].update({
type: "bar"
});
});
$('#set_pie').click(function () {
var chart = $(this).parent('div').attr('id');
chart = chart.replace('_', '');
$('#' + chart).highcharts().series[0].update({
type: "pie"
});
});
Highcharts创作:
$('#top10').highcharts({
chart: {
type: 'column',
margin: [50, 50, 100, 80]
},
title: {
text: 'TOP10'
},
subtitle: {
text: ' '
},
credits: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Ilość'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b>
' + 'Ilość: ' + this.y;
}
},
series: [{
name: 'Ilość zgłoszeń, TOP10',
data: [1, 2, 3, 43],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
这是一个小提琴的例子:http://jsfiddle.net/supergg/zqvNq/4/
谢谢,
3 回答
您可以在图表中使用反转参数并更新yAxis . http://jsfiddle.net/n9xkR/8/
这对我有用:
不确定你是否找到了答案,但我发现一个链接对您有用,即使将来参考也是如此 . 那么请你好好看一下 . 我正在寻找别的东西,我找到了这个链接,也得到了你的问题 .
如果这对您有任何帮助,请告诉我或接受我的回答 . 干杯:)