在一个页面中使用多个Highcharts [英] Using multiple Highcharts in a single page

问题描述

我用Highcharts，我想多个图表添加到一个单页

I’m using Highcharts and I want to add multiple charts to a single page

下面是我的js code

below is my js code

<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>

我可以简单重复code和改变code renderTo：容器，以显示其它图表，但code是重复多次

I can simple repeat the code and change the code renderTo: 'container' to display the other charts but the code is duplicated many times.

有没有什么更好的方法，我可以重复使用code这样我就可以将数据传递给

Is there any better way that i can reuse the code so I can pass the data to

 series: []

title: {
                text: 'Visual Data'
            },

显示多个图表。现在我想给5的图表在一个单一的页面。

to display multiple charts. Currently I want to show 5 charts in a single page.

推荐答案

您可以使用 Highcharts.setOptions 来定义哪些是相同的页面上的所有图表选项。以下是例子code：

You can use Highcharts.setOptions to define the options which are same for all the charts on the page. Following is the example code:

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'               

        }
    });

您可以定义的所有属性这种方式（不知道全部）。

You can defined all the properties this way(Not sure about "All").

这篇关于在一个页面中使用多个Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！