提示在谷歌图，而图填充使用JSON(Tooltip in Google Chart while po

我使用JSON目前填充我的谷歌的图表，但我需要自定义工具提示为好。目前我的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波利齐的回答，一些图表类型可以接受的数据不同roles （数据，工具提示，注释等）。我将展示如何通过AJAX（动态）填充，并通过JavaScript，使用PHP内置显示。

这是一个单个阵列，多列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”：[{ “类型”： “字符串”， “标签”： “植物品种”}，{ “类型”： “号码”， “标签”： “平均”}，{”键入 “：” 号码”， “标签”： “Harvested_Hectares”}，{ “类型”： “号码”， “标签”： “Kilos_Harvested”}，{ “类型”： “号码”， “标签”： “Harvested_Acres” }，{ “类型”： “号码”， “标签”： “Bushels_Harvested”}，{ “类型”： “号码”， “标签”： “工具提示”}]， “行”：[{ “C”：[ { “v”： “星期一6210 IPRO \ N18亩”}，{ “v”： “153”}，{ “v”： “435996”}，{ “v”： “165280”}，{ “v”： 18}，{ “v”：2755}，{ “v”： “153蒲式耳/英亩”}]}，{ “C”：[{ “v”： “Tmg的7062 IPRO \ n21.9亩”}，{ “v”： “150”}，{ “v”： “529600”}，{ “v”： “197537”}，{ “v”：22}，{ “v”：3292}，{ “v”： “150蒲式耳/英亩”}]}，{ “C”：[{ “v”： “小轮车Potencia RR \ n15.2亩”}，{ “v”： “141”}，{ “v”：“367527 “}，{” v “：” 128179 “}，{” v “：15}，{” v “：2136}，{” v “：” 141蒲式耳/英亩 “}]}，{” C“：[ { “v”： “作为3575 IPRO \ n34.7亩”}，{ “v”： “139”}，{ “v”： “839901”}，{ “v”： “289269”}，{“v “：35}，{” v “：4821}，{” v “：” 139蒲式耳/英亩“}]}]}}

这是调用Ajax和显示子阵列的JavaScript average正确接收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);

现在，我将为它，你还记得有7列（从0开始计数）的阵列的图。

第一个参数= 0意味着我们使用在x轴上第一柱。第二个参数= 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);
}

这会产生这样的事