0

我正在使用 highcharts.js 创建饼图，我必须使用 highcharts.js 创建超过 5 个饼图，但我遇到了一个问题，

对于在我的页面中使用一个 javascript 的每个饼图，是否有可能通过仅编写一个 javascript 我可以提供所有饼图 div id，例如我正在使用：

chart: {
            renderTo: 'container1',
            //borderRadius: 10,
            plotBackgroundColor: null,
            plotBorderWidth: 2,
            borderWidth: 0,
            plotShadow: false,

我可以这样使用吗：

chart: {
            renderTo: 'container1','container2','container3','container4'....
            //borderRadius: 10,
            plotBackgroundColor: null,
            plotBorderWidth: 2,
            borderWidth: 0,
            plotShadow: false,
4

3 回答 3

1

不，我查看了文档，看起来 HighCharts.js 只支持renderTo单个 HTML 元素。http://api.highcharts.com/highcharts#chart.renderTo

我假设您有 5 个具有不同数据集的饼图，因此无论如何将同一个图表加载到多个 DIV 元素中是没有意义的。

您可以编写一个循环来加载不同的图表。

例如：

function loadCharts(chartData){
    for(i=0; i<chartData.length; i++){
        var container = chartData[i]['container'];
        var myData = chartData[i]['myData'];

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: container,
                height: 400,
                plotBackgroundColor: null,
                plotBorderWidth: 2,
                borderWidth: 0,
                plotShadow: false
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            series: [{
                data: myData        
            }]
        });
    }
}

var highchartsdata = [{
    container: 'container1',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container2',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container3',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container4',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    },
    {
    container: 'container5',
    myData: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }];

loadCharts(highchartsdata);

这是一个我没有测试的例子，但如果你想这样做的话，应该可以帮助你走上正确的道路。

于 2012-09-05T18:49:17.417 回答
0

从文档中不清楚，但看起来Highcharts.setOptions将允许您为所有后续图表设置默认选项，然后可以在调用new Highcharts.Chart({ ...options...})创建图表时覆盖*。

如果您将此库与 jQuery 一起使用，看起来您可以使用以下语法

$('#container1, #container2, #containerN').each(function(){
  new Highcharts.Chart({ chart:{ renderTo:this } });
})

编辑：...对于所有图表中的相同系列数据，这似乎很好，因为系列是可以提供图表的选项。但是，它似乎不尊重提供系列作为默认选项。因此，如果您的系列数据是关于数据的元素，那么

$('#container1, #container2, #containerN').each(function(){
  var $c = $(this);
  new Highcharts.Chart({ chart:{ renderTo:this }, series:$c.data() });
})

...假设数据以适当的方式附加。$c.data()或者，根据其中的内容生成/定位/加载该系列对象.each似乎非常明智。当然，如果你真的对多个图表使用同一系列数据，那么你可以简单地：

var s = ... // series value
$('#container1, #container2, #containerN').each(function(){
  new Highcharts.Chart({ chart:{ renderTo:this }, series:s });
});

我根据他们提供的文档进行了一些快速的代码修改，可以在这里找到。

于 2012-09-05T19:15:25.200 回答
0

您上面的内容不是有效的 JavaScript 语法。

查看 Highcharts API 文档，似乎没有任何方法可以指定多个元素同时呈现。它必须一次是一个元素。最好的办法是循环渲染。

于 2012-09-05T18:48:02.520 回答