jquery - 在单个页面中使用多个 Highcharts

Question

我正在使用 Highcharts，我想将多个图表添加到单个页面

下面是我的js代码

<script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Visual Data'
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },

            series: [{

                type: 'pie', 
                name: 'Market Share',
                data: [
                    ['Plan 1',       <?php echo $1; ?>],
                    ['Plan 2',    <?php echo $2; ?>],
                    ['Plan 3',     <?php echo $3; ?>]

                ]
            }]
        });
    });

});
        </script>

我可以简单地重复代码并更改代码 renderTo: 'container' 以显示其他图表，但代码重复了很多次。

有没有更好的方法可以重用代码，以便将数据传递给

 series: []

title: {
                text: 'Visual Data'
            },

显示多个图表。目前我想在一个页面中显示 5 个图表。

Answer 1

您可以使用Highcharts.setOptions为页面上的所有图表定义相同的选项。以下是示例代码：

Highcharts.setOptions({
        global: {
            //Highchart uses UTC time by default
            useUTC: false
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        xAxis: {
            type: 'datetime',
            tickColor: '#96AA8C',
            labels: {
                style: {
                    color: '#555F50'
                }
            },
            tickPixelInterval: 70,
            maxZoom: 20 * 1000
        },
        title: {
            style: {
                color: '#343434'
            }
        },
        tooltip: {
            xDateFormat: '%d/%m/%Y %H:%M:%S'               

        }
    });

您可以通过这种方式定义所有属性（不确定“全部”）。