0

Highcharts を使用してグラフを表示しようとしています。私は、php を使用して mysql db からデータを取得し、データの配列を作成して、それらを Highcharts Jquery に挿入しています。

この形式でデータを表示する必要があります (グラフィカルな表現ではありません)。

mon = 0
tues = 4
wed = 2
thu = 0
fri = 4
sat = 20
sun = 45

月曜日が常に最初で、日曜日が最後です。

しかし、データは日付範囲を使用して DB から取得され、データベースから次のような配列しか取得できない場合があります。

Array
(
    [0] => Array
        (
            [TotalClicksPerDay] => 35
            [weekDay] => 4 (which is my case is Thurs)
        )
}

したがって、この場合は次のように表示する必要があります: (TotalClicksPerDay が重要です) 

mon = 0
tues = 0
wed = 0
thu = 35
fri = 0
sat = 0
sun = 0

配列の値を Highchart に追加し、曜日を取得して「木」の値を正しい場所に配置するにはどうすればよいですか?

誰かが似たようなことをしましたか？正しい方向に私を向けることができますか？どうやって始めたらいいのかもわかりません。

これが私のハイチャートJqueryです。配列をどのように使用しているかがわかります。

    jQuery(document).ready(function($) {
          var chart;
            $(document).ready(function() {
              chart = new Highcharts.Chart({
                chart: {
                  renderTo: 'container',
                  type: 'column'
                },
                title: {
                  text: '$type'
                },


   subtitle: {
              text: 'Xbox landscape'
            },
            xAxis: {
              categories: 
              $categoryGraph //php array
              ,labels: {
              rotation: 0,
                align: 'center',
                x: 0,
                y: 20,
                style: {
                  fontSize: '8px',
                  fontFamily: 'Verdana, sans-serif'
                }
              }
            },
            yAxis: {
              min: 0,
              title: {
                text: 'Clicks'
              }
            },
            legend:  {
                    enabled: false
                }, /*{
              layout: 'Vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 0,
                y: 30,
                floating: false,
                shadow: true
              },*/
             tooltip: {
                formatter: function() {
                  return ''+
                    this.x +': '+ this.y +' Clicks';
                  }
              },
              plotOptions: {
                column: {
                  pointPadding: 0.2,
                    borderWidth: 0
                }
              },
              series: [{name: '$type', data:[$clickTotalArray //php array }]
            });
        });
    });
4

1 に答える 1

0

ハイチャートが理解できるものにデータを解析する方法を尋ねていますか?

さて、正しく設定したい主な動的オプションはxAxis.categoriesと でseries.data、すでに把握しているようです。

categories

文字列の配列である必要があり、それ以上またはそれ以下は受け入れられません。

例えば：-categories=['Mon','Tue','Wed']

data

配列の配列、オブジェクトの配列、または値の配列である必要があります。詳細については、ドキュメントを参照してください

データはほとんど単純な値であり、xValue は文字列であるためカテゴリに分類されるため、dataオブジェクトは数値の配列である必要があります。

例えば：-data=[100,200,300]

これで、データがどのように見えるかの最終的な形式が得られました。使用可能なデータ構造/オブジェクト グラフをこの形式に解析する必要があります。PHP または JavaScript でこれを行うオプションがあります。

これは、javascript で行う方法です。Highchartコンストラクターを呼び出す前に必ずこれを行い、オプションの設定中に派生オブジェクトを使用してください。

var superData = [{
    propertyA: 'A',
    propertyB: 10
}, {
    propertyA: 'B',
    propertyB: 15
}, {
    propertyA: 'C',
    propertyB: 1
}];

var seriesData = [],
    categories = [];
for (var i = 0; i < superData.length; i++) {
    //you may want to do a parseInt/parseFloat it this value is a string
    seriesData.push(superData[i].propertyB);
    categories.push(superData[i].propertyA);
}

...
    xAxis: {
        categories: categories
    },
    series: [{
        name: 'serie',
        type: 'column',
        data: seriesData
        }]
...

複雑な JSON をハイチャート形式に解析する | ハイチャート & ハイストック @ jsFiddle

PHP で同様のことができる方法を確認するには、「mysql の結果セットを (名前、データ) オブジェクトに変換して HighCharts にフィードする」を参照してください。

于 2013-01-21T19:24:11.353 に答える