这是我渲染后更新的代码。在此代码中,前三个按钮(plain, inverted and polar)
工作正常,但最后两个按钮(pie, spline)
无效。
var chart = Highcharts.chart('container', {
title: {
text: 'Chart.update'
},
subtitle: {
text: 'Plain'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
type: 'column',
colorByPoint: true,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
showInLegend: false
}]
});
$('#plain').click(function () {
chart.update({
chart: {
inverted: false,
polar: false,
pie:false,
spline:false
},
subtitle: {
text: 'Plain'
}
});
});
$('#inverted').click(function () {
chart.update({
chart: {
inverted: true,
polar: false,
pie:false,
spline:false
},
subtitle: {
text: 'Inverted'
}
});
});
$('#polar').click(function () {
chart.update({
chart: {
inverted: false,
polar: true,
pie:false,
spline:false
},
subtitle: {
text: 'Polar'
}
});
});
$('#pie').click(function () {
chart.update({
chart: {
pie:true,
inverted: false,
polar: false,
spline:false,
plain:false
},
subtitle: {
text: 'Pie'
}
});
});
$('#spline').click(function () {
chart.update({
chart: {
type:'spline',
inverted: false,
polar: false,
pie:false,
plain:false
},
subtitle: {
text: 'spline'
}
});
});
我正在从highcahrts.com学习这个主题,我想添加其他图表。
答案 0 :(得分:1)
图表Pie
和spline
具有不同的通用图表,但柱形图可以用两种不同的形式表示plain
表示默认柱形图,inverted
表示柱形图表轴反转和极坐标具有XY坐标,X轴围绕周边缠绕,而Y轴从中心延伸到顶部。它们不能混合使用(饼形,样条曲线)改变形状(平面,倒置,极性)
所以要将图表更新为普通(列),倒置(列),极性,饼图,样条曲线我使用图表type
。希望这是有意义的。
var chart = Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'Chart.update'
},
subtitle: {
text: 'Plain'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
colorByPoint: true,
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
showInLegend: false
}]
});
$('#plain').click(function() {
chart.update({
chart: {
type: 'column',
inverted: false,
polar: false
},
subtitle: {
text: 'Plain'
}
}, true);
});
$('#inverted').click(function() {
chart.update({
chart: {
type: 'column',
inverted: true,
polar: false
},
subtitle: {
text: 'Inverted'
}
}, true);
});
$('#polar').click(function() {
chart.update({
chart: {
type: 'column',
inverted: false,
polar: true
},
subtitle: {
text: 'Polar'
}
}, true);
});
$('#pie').click(function() {
chart.update({
chart: {
type: 'pie',
inverted: false,
polar: false
},
subtitle: {
text: 'Pie'
}
}, true);
});
$('#spline').click(function() {
chart.update({
chart: {
type: 'spline',
inverted: false,
polar: false
},
subtitle: {
text: 'spline'
}
}, true);
});

#container {
min-width: 320px;
max-width: 600px;
margin: 0 auto;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<button id="plain" class="autocompare">Plain</button>
<button id="inverted" class="autocompare">Inverted</button>
<button id="polar" class="autocompare">Polar</button>
<button id="pie" class="autocompare">Pie</button>
<button id="spline" class="autocompare">Spline</button>
&#13;