使用JSON填充圖表時Google Chart中的工具提示

Question

我正在使用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); 

請讓我知道，如果有人知道的解決方案。

Answer 1

工具提示欄定義不明確;應該是這樣的：

{"id": "", "role": "tooltip", "type": "string", "p" : { "role" : "tooltip" } } 

Answer 2

擴展在@Marc波利齊的回答，一些圖表類型可以接受different roles (data, tooltip, annotation, etc)數據。我將展示如何通過AJAX（動態）進行填充，並通過使用PHP構建的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() 
) 
); 

這將產生下面

輸出

{「cols」：[{「type」：「string」，「label」：「Plant Variety」}，{「type」：「number」，「label」：「Avg」} ，{ 「類型」： 「號碼」， 「標籤」： 「Harvested_Hectares」}，{ 「類型」： 「號碼」， 「標籤」： 「Kilos_Harvested」}，{ 「類型」： 「號碼」， 「標籤」： 「Harvested_Acres」}，{ 「類型」： 「號碼」， 「標籤」： 「Bushels_Harvested」}，{ 「type」：「number」，「label」：「Tooltip」}]，「rows」：[{「c」：「{Mona 6210 Ipro \ n18 acres」}，{「v」：「 {「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「：」150bu/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英畝」 ：「139」}，{「v」：「839901」}，{「v」：「289269」}，{「v」：35}，{「v」：4821}，{「v」：「/AC「}]}]}}

這是調用Ajax和正確接收AJAX

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

後顯示子陣列 average的JavaScript

現在我將爲數組創建一個視圖，正如您記得有7列（從0開始計數）。

第一個參數= 0意味着我們在x軸上使用第1列。第二個參數= 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); 
} 

這將產生一些事項像這樣