2

Highcharts を使用していて、1 つのページに複数のグラフを追加したい

以下は私の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'
            },

複数のチャートを表示します。現在、1 ページに 5 つのグラフを表示したいと考えています。

4

1 に答える 1

7

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'               

        }
    });

この方法ですべてのプロパティを定義できます（「すべて」についてはわかりません）。

于 2012-07-19T11:29:01.477 に答える