1

Highcharts のデモに基づいて、html に次の内容を記述しました。

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

そして、次の私のcharts.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 ループを設定できます)、各ドライブの円グラフを呼び出します。

4

2 に答える 2

2

php ループでもグラフを作成し、.highcharts各グラフを呼び出してみませんか?

単一の構成オブジェクトを作成する場合は、jQuery のextendsメソッドを使用します。

ここにフィドルの例があります。

// 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)
  );
于 2013-05-26T13:45:48.027 に答える