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数据（数据、工具提示、注释等）。我将展示如何通过 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()
 )
);

这将生成下面的输出

{"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 英亩"},{"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"}]}]}}

average这是正确接收 AJAX 后调用 ajax 并显示子数组的 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);
}

这会产生这样的东西 条形图生产蒲式耳

于 2017-03-04T13:49:39.143 回答