嗨,我正在使用 highchart 来显示一个简单的饼图。下面是我的 JavaScript
<script type="text/javascript">
$(document).ready(function () {
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Infoblox Project Resources'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Project share',
data: [
['Bill', {{ project }}],
['Non-Bill', {{ not_bill }}],
]
}]
};
$('#dashboard').highcharts(options);
$('#dashboard1').highcharts(options);
});
</script>
如果我想多次重复此图表,请点击此处。我怎样才能实现它。现在我使用 highchart 中的所有内容作为标准。除了 {{ project }} 和 {{ no_bill }} 。这两个都是整数值,将由 python 从 django pinax 渲染。
在这里,我想使用不同的标题和不同的 {{ project }} 和 {{ no_bill }} 值对图表进行 n 次
最佳答案
如何在 Highcharts.setOptions(options)
中设置所有选项(数据和标题除外),就像这里:http://www.highcharts.com/demo/column-basic/dark-unica
然后创建图表:
$('#dashboard').highcharts({
title: { text: {{ mytext }} },
series: [{
type: 'pie',
name: 'Project share',
data: [
['Bill', {{ project }}],
['Non-Bill', {{ not_bill }}],
]
}]
});
$('#dashboard1').highcharts({
title: { text: {{ mytext_2 }} },
series: [{
type: 'pie',
name: 'Project share',
data: [
['Bill', {{ project_2 }}],
['Non-Bill', {{ not_bill_2 }}],
]
}]
});
或者更好:
function createChart(container, text, valA, valB) {
$(container).highcharts({
title: { text: text },
series: [{
type: 'pie',
name: 'Project share',
data: [
['Bill', valA ],
['Non-Bill', valB ],
]
}]
});
}
createChart('#dashboard', {{ mytext }}, {{ project }}, {{ not_bill }});
createChart('#dashboard1', {{ mytext_2 }}, {{ project_2 }}, {{ not_bill_2 }});
关于javascript - 使用 highchart 作为模板,多次使用不同的标题和不同的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23783479/