Question

根据Highcharts演示，我的html中有以下内容：

<div class="container" style="height: 300px; width:500px"></div>
<script type="text/javascript" src="charts.js"></script>

以下是我的chart.js：

$(document).ready(function() {
    $('.container').highcharts({
        credits: {
            enabled: false
        },
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: label
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function() {
                        return '<b>'+ this.point.name +'</b>: '+ this.y;
                    }
                }
            }
        },
        series: [{
            name: 'Space',
            type: 'pie',
            data: [
                ['Used',   used - 0 ],
                ['Free',   free - 0 ],
            ]
        }]
    });
});

这是一个显示驱动器信息的饼图。但是，我有一个动态生成此数据的脚本（取决于有多少驱动器），因此我不想为每个驱动器创建新图表。我想动态创建一个div（这将在php中，所以我可以设置一个foreach循环）并为每个驱动器调用饼图。

Answer 1

为什么不在php循环中创建图表并为每个图表调用.highcharts？

如果要创建单个配置对象，请使用jQuery的extend方法。

小提琴示例here。

// create your base config
var baseConfig = {
    credits: {
        enabled: false
    },
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },        
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage}%</b>',
        percentageDecimals: 1
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.y;
                }
            }
        }
    }
};

// create your data
var data1 = {title: {
        text: 'One'
    },
    series: [{
        name: 'Space',
        type: 'pie',
        data: [
            ['Used',  30],
            ['Free',  70],
        ]
 }]};

 var data2 = {title: {
        text: 'Two'
    },
    series: [{
        name: 'Space',
        type: 'pie',
        data: [
            ['Used',  60 ],
            ['Free',  40],
        ]
  }]};

  //combine them
  $('#container1').highcharts(
      $.extend(baseConfig, data1)
  );

  $('#container2').highcharts(
    $.extend(baseConfig, data2)
  );

Answer 2

您可以只推送适当数量的系列，而不是使用许多饼图/容器。

示例：http://jsfiddle.net/u7FQS/18/

series: [{
            type: 'pie',
            name: 'testname1',
            center: [70, 140],
            showInLegend: true,
            data: [
                ['Commerce', 33.0],
                ['Engineering', 32.3], {
                    name: 'Financial Services',
                    y: 18.8,
                    sliced: true,
                    selected: true
                }, ['Logistics, Aviation & Shipping', 5.5],
                ['Seafood & Marine', 9.2],
                ['Corporate Services & others', 1.2]
            ]
        }, {
            type: 'pie',
            name: 'testname2',
            center: [230, 140],
            showInLegend: false,
            data: [
                ['Commerce', 33.0],
                ['Engineering', 32.3], {
                    name: 'Financial Services',
                    y: 18.8,
                    sliced: true,
                    selected: true
                }, ['Logistics, Aviation & Shipping', 5.5],
                ['Seafood & Marine', 9.2],
                ['Corporate Services & others', 1.2]
            ]
        }, {
            type: 'pie',
            name: 'testname3',
            center: [390, 140],
            showInLegend: false,
            data: [
                ['Commerce', 33.0],
                ['Engineering', 32.3], {
                    name: 'Financial Services',
                    y: 18.8,
                    sliced: true,
                    selected: true
                }, ['Logistics, Aviation & Shipping', 5.5],
                ['Seafood & Marine', 9.2],
                ['Corporate Services & others', 1.2]
            ]
        }, {
            type: 'pie',
            name: 'testname4',
            center: [550, 140],
            showInLegend: false,
            data: [
                ['Commerce', 33.0],
                ['Engineering', 32.3], {
                    name: 'Financial Services',
                    y: 18.8,
                    sliced: true,
                    selected: true
                }, ['Logistics, Aviation & Shipping', 5.5],
                ['Seafood & Marine', 9.2],
                ['Corporate Services & others', 1.2]
            ]
        }]

我想使用不同数据但相同选项的几个Highcharts

2 个答案: