Question

使用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,

Answer 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);

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

Answer 2

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

查看Highcharts API文档，似乎没有任何方法可以同时指定多个元素进行渲染..它必须一次只能是一个元素。你最好的选择是循环渲染。

Answer 3

从文档中不清楚，但看起来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 });
});

我根据demo他们的文档provided进行了一些快速代码修改，可以找到here。

使用Highcharts.js创建饼图

3 个答案: