我正在尝试使用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><br/>' + '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/
谢谢,
答案 0 :(得分:12)
您可以在图表中使用反转参数并更新yAxis。 http://jsfiddle.net/n9xkR/8/
$('#bar').click(function () {
chart.inverted = true;
chart.xAxis[0].update({}, false);
chart.yAxis[0].update({}, false);
chart.series[0].update({
type: 'column'
});
});
答案 1 :(得分:3)
这对我有用:
df = data.iloc[:, data.columns.str.contains('durations.*'|'shape.*') ]
df.fillna(0)
答案 2 :(得分:0)
这对我有用:
function changeType() {
var series = chart.series[0];
var newType = your_condition_here ? 'column' : 'bar';
var dataArray = [],
points = series.data;
series.chart.addSeries({
type: newType,
name: series.name,
color: series.color,
data: series.options.data
}, false);
series.remove();
}
它将使用新类型创建新系列,并删除旧系列。
可以根据需要免费添加更多选项。
希望它对某人有帮助:)
答案 3 :(得分:0)
您可以在图表级别更新图表类型。由于您在图表属性中设置了类型,因此您需要更新相同的属性。
// Initializing Chart
let probChart = new Highcharts.Chart('container', {
chart: {
type: "line"
},
});
// Updating Chart Type
probChart.update({
chart: { type: "column" }
});
答案 4 :(得分:-1)
不确定您是否找到了答案,但我找到了一个对您有用的链接,即使将来参考也是如此。那么请你好好看一下。我正在寻找别的东西,我找到了这个链接,也得到了你的问题。
[http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-update/][1]
如果这对您有任何帮助,请告诉我或接受我的回答。干杯:)