1

現在、JSONを使用してGoogleグラフにデータを入力していますが、ツールチップもカスタマイズする必要があります。現在、私のJSONは次のようになっています。

{
    "cols": [
        {"id": "", "label": "date", "type": "string"},
        {"id": "", "label": "price", "type": "number"}
    ],
    "rows": [
        {"c":[{"v": "Apr 24th","f":null}, {"v": 56000,"f":"56000"}]},
        {"c":[{"v": "May 3rd","f":null}, {"v": 68000,"f":"68000"}]},
        {"c":[{"v": "May 13th","f":null}, {"v": 50400,"f":"50400"}]}
    ]
}

しかし、JSONでツールチップを次のように指定すると、次のようになります。

{
    "cols": [
        {"id": "", "label": "Date", "type": "string"},
        {"id": "", "label": "price", "type": "number"},
        {"id": "", "role": "tooltip", "type": "string"}
    ],
    "rows": [
        {"c":[{"v": "Apr 24th","f":"null"}, {"v": 56000,"f":"56000"}, {"v": "24 April, Price - 56000, Seller-abcd"}]},
        {"c":[{"v": "May 3rd","f":"null"}, {"v": 68000,"f":"68000"}, {"v": "3 May, Price - 68000, Seller-abcd"}]},
        {"c":[{"v": "May 13th","f":"null"}, {"v": 50400,"f":"50400"}, {"v": "23 May, Price - 50000, Seller-abcd"}]}
    ]
}

直列のすべての値が同じデータ型である必要があるというエラーが表示されます。

私のクライアント側のコードは次のようになります。

var jsonData = $.ajax({
    url: '../phps/testPhp.php',
    dataType:"json",
    async: false
}).responseText;

var dataTable = new google.visualization.DataTable(jsonData);

var minVal = 50000;
var maxVal = 70000;    

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

var options = {
    width: 375, height: 240,
    legend: 'none',
    pointSize: 5,
    backgroundColor: 'transparent',
    vAxis: { minValue: 45000, maxValue: 70000 }
};

chart.draw(dataTable, options);

誰かが解決策を知っているかどうか私に知らせてください。

4

2 に答える 2

4

ツールチップ列の定義が正しくありません。次のようなものにする必要があります：

{"id": "", "role": "tooltip", "type": "string", "p" : { "role" : "tooltip" } }
于 2012-06-24T23:02:52.650 に答える
0

@Marc Polizziの回答を拡張すると、一部のグラフタイプは、さまざまなrolesデータ（データ、ツールチップ、注釈など）を受け入れることができます。PHPで構築されたAJAXを介して（動的に）データを入力し、javascriptを介して表示する方法を示します。

これは、単一配列、複数列のJSONデータセット（AJAXリクエストに応答するphpファイル内）であり、そのリスナーは次のように呼び出さyourAjaxListener.phpれます。

$grafico = array(
 'average' => array(
    'cols' => array(
        array('type' => 'string', 'label' => 'Plant Variety'),
        array('type' => 'number', 'label' => 'Avg'),
        array('type' => 'number', 'label' => 'Harvested_Hectares'),
        array('type' => 'number', 'label' => 'Kilos_Harvested'),
        array('type' => 'number', 'label' => 'Harvested_Acres'),
        array('type' => 'number', 'label' => 'Bushels_Harvested'),
        array('type' => 'number', 'label' => 'Tooltip')
    ),  
    'rows' => array()
 )
);

以下の出力が生成されます

{"average"：{"cols"：[{"type"： "string"、 "label"： "Plant Variety"}、{"type"： "number"、 "label"： "Avg"}、{" type "：" number "、" label "：" Harvested_Hectares "}、{"type "：" number "、" label "：" Kilos_Harvested "}、{" type "：" number "、" label "：" Harvested_Acres " }、{"type"： "number"、 "label"： "Bushels_Harvested"}、{"type"： "number"、 "label"： "Tooltip"}]、 "rows"：[{"c"：[ {"v"： "Mon 6210 Ipro \ n18 acres"}、{"v"： "153"}、{"v"： "435996"}、{"v"： "165280"}、{"v"： 18}、{"v"：2755}、{"v"："153 bu / ac"}]}、{"c"：[{"v"： "Tmg 7062 Ipro \ n21.9エーカー"}、{"v"： "150"}、{"v"： "529600 "}、{" v "：" 197537 "}、{" v "：22}、{" v "：3292}、{" v "：" 150 bu / ac "}]}、{" c "：[ {"v"： "Bmx Potencia RR \ n15.2エーカー"}、{"v"： "141"}、{"v"： "367527"}、{"v"： "128179"}、{"v "：15}、{" v "：2136}、{" v "：" 141 bu / ac "}]}、{" c "：[{" v "：" As 3575 Ipro\n34.7エーカー"} 、{"v"： "139"}、{"v"： "839901"}、{"v"： "289269"}、{"v"：35}、{"v"：4821}、{"v "：" 139 bu / ac "}]}]}}9エーカー"}、{" v "：" 150 "}、{" v "：" 529600 "}、{" v "：" 197537 "}、{" v "：22}、{" v "：3292} 、{"v"： "150 bu / ac"}]}、{"c"：[{"v"： "Bmx Potencia RR \ n15.2エーカー"}、{"v"： "141"}、{ "v"： "367527"}、{"v"： "128179"}、{"v"：15}、{"v"：2136}、{"v"： "141 bu / ac"}]}、 {"c"：[{"v"： "As 3575 Ipro \ n34.7エーカー"}、{"v"： "139"}、{"v"： "839901"}、{"v"： "289269 "}、{" v "：35}、{" v "：4821}、{" v "：" 139 bu / ac "}]}]}}9エーカー"}、{" v "：" 150 "}、{" v "：" 529600 "}、{" v "：" 197537 "}、{" v "：22}、{" v "：3292} 、{"v"： "150 bu / ac"}]}、{"c"：[{"v"： "Bmx Potencia RR \ n15.2エーカー"}、{"v"： "141"}、{ "v"： "367527"}、{"v"： "128179"}、{"v"：15}、{"v"：2136}、{"v"： "141 bu / ac"}]}、 {"c"：[{"v"： "As 3575 Ipro \ n34.7エーカー"}、{"v"： "139"}、{"v"： "839901"}、{"v"： "289269 "}、{" v "：35}、{" v "：4821}、{" v "：" 139 bu / ac "}]}]}}{"v"： "150 bu / ac"}]}、{"c"：[{"v"： "Bmx Potencia RR \ n15.2エーカー"}、{"v"： "141"}、{" v "：" 367527 "}、{" v "：" 128179 "}、{" v "：15}、{" v "：2136}、{" v "：" 141 bu / ac "}]}、{ "c"：[{"v"： "As 3575 Ipro \ n34.7エーカー"}、{"v"： "139"}、{"v"： "839901"}、{" v"： "289269" }、{"v"：35}、{"v"：4821}、{"v"： "139 bu / ac"}]}]}}{"v"： "150 bu / ac"}]}、{"c"：[{"v"： "Bmx Potencia RR \ n15.2エーカー"}、{"v"： "141"}、{" v "：" 367527 "}、{" v "：" 128179 "}、{" v "：15}、{" v "：2136}、{" v "：" 141 bu / ac "}]}、{ "c"：[{"v"： "As 3575 Ipro \ n34.7エーカー"}、{"v"： "139"}、{"v"： "839901"}、{" v"： "289269" }、{"v"：35}、{"v"：4821}、{"v"： "139 bu / ac"}]}]}}[{"v"： "As 3575 Ipro \ n34.7エーカー"}、{"v"： "139"}、{"v"： "839901"}、{"v"： "289269"}、{" v "：35}、{" v "：4821}、{" v "：" 139 bu / ac "}]}]}}[{"v"： "As 3575 Ipro \ n34.7エーカー"}、{"v"： "139"}、{"v"： "839901"}、{"v"： "289269"}、{" v "：35}、{" v "：4821}、{" v "：" 139 bu / ac "}]}]}}

これは、ajaxを呼び出し、averageAJAXを適切に受信した後にサブ配列を表示するためのJavaScriptです。

function drawChart() {  
 var jsonDataVariety = $.ajax({
      url: "/yourpath/yourAjaxListener.php",
      dataType: "json",
      async: false
      }).responseText;
 var jsonVariety = eval("(" + jsonDataVariety + ")");
 var jsonSubTotalVariety = new google.visualization.DataTable(jsonVariety.average);

次に、配列のビューを作成します。これは、覚えているように、7つの列があります（0からカウントを開始します）。

最初のパラメーター=0は、x軸の最初の列を使用することを意味します。2番目のパラメーター=5は、y軸の6番目の列を使用することを意味します。

 var viewSubTotalVariety = new google.visualization.DataView(jsonSubTotalVariety);
 viewSubTotalVariety.setColumns([0, 5,

次に、列に印刷されている番号に表示されるデータを確立しannotationます（以下の例では= 2755、3292 ...）。

                   { calc: "stringify",
                     sourceColumn: 5,
                     type: "string",
                     role: "annotation" },

そして最後に、ツールチップテキストが何であるかを確立します。そのデータは列番号6（7列目）から取得されます。

                   { sourceColumn: 6,
                     type: "string",
                     role: "tooltip" }]);

次に、どのHMTL要素がグラフを受け取るかを決定し、それを描画する関数を呼び出して viewSubTotalVariety、生のJSONデータセットではなくデータを消費します。

 var chart7 = new google.visualization.ColumnChart(document.getElementById('bar7_div'));
 chart7.draw(viewSubTotalVariety, optionsSubTotalVariety);
}

このようなものを生成します 棒グラフ生産ブッシェル

于 2017-03-04T13:49:39.143 に答える