与标题一样,如果你有一个图表,每个系列都启用了百分比堆叠,然后尝试使用series.update()方法更改为正常堆叠,则它不起作用。它似乎没有做任何事情。
百分比正常示例:http://jsfiddle.net/8tbPD/
反过来确实有效。
正常百分比示例:http://jsfiddle.net/Tn3n9/
我有什么遗失的吗?
感谢。
$('button').on('click', function() {
for(var index in chart.series) {
chart.series[index].update({stacking:'normal'});
}
});
答案 0 :(得分:0)
不幸的是,您需要销毁并创建一个新图表。
答案 1 :(得分:0)
在另一个论坛上查看此答案:http://forum.highcharts.com/highstock-usage/dynamic-update-toggle-between-value-and-percentage-t31298/
基本上,添加"堆叠"但没有数据。然后使用JavaScript显示和隐藏该系列(其stack-attribute将影响所有其他系列),例如按钮。
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
showInLegend: false,
stacking: 'percent'
}]
});
// the button action
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.series[5];
if (series.visible) {
series.hide();
$button.html('Percent');
} else {
series.show();
$button.html('Normal');
}
});
});
&#13;
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
<button id="button">Normal</button>
&#13;