javascript - 使用 highchart 作为模板，多次使用不同的标题和不同的值

Question

嗨，我正在使用 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 次

Answer 1

如何在 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 }});