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 Polizzi的答案，一些图表类型可以接受different roles (data, tooltip, annotation, etc)中的数据。我将展示如何通过AJAX（动态）填充并通过javascript显示，使用PHP构建。

这是一个单数组，多列JSON数据集（在php文件中，它回答了AJAX请求），其侦听器名为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”} ，{ “类型”： “号码”， “标签”： “Harvested_Hectares”}，{ “类型”： “号码”， “标签”： “Kilos_Harvested”}，{ “类型”： “号码”， “标签”： “Harvested_Acres”}，{ “类型”： “号码”， “标签”： “Bushels_Harvested”}，{ “类型”： “号码”， “标签”： “工具提示”}]， “行”：[{“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“：”作为3575 Ipro \ n34.7英亩“}，{”v“：”139“}，{”v“：”839901“}，{”v“：”289269“}， {“v”：35}，{“v”：4821}，{“v”：“139 bu / ac”}]}]}}

这是调用ajax并在正确接收AJAX后显示子数组average的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轴上使用第一列。第二个参数= 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);
}

会生成这样的东西

使用JSON填充图表时Google图表中的工具提示

2 个答案: