c# - 使用 JSON 为 AnnotatedTimeLine 填充 google.visualization.DataTable

Question

我有一个 HttpHandler，它返回一些 JSON(我认为)是 google.visualization.DataTable 的正确格式，但是 AnnotatedTimeLine无法正常工作？

这是处理程序返回的 JSON:

{cols: [{id: 'DATE', label: 'Date', type: 'date'}, {id: 'KEYWORD51', label: 'vw cheltenham', type: 'number'}, {id: 'KEYWORD52', label: 'volkswagen cheltenham', type: 'number'}, {id: 'KEYWORD61', label: 'vw dealer cheltenham', type: 'number'}], rows: [{c: [{v: new Date(2010, 3, 13)}, {v: 20}, {v: 1}, {v: 2}]}, {c: [{v: new Date(2010, 3, 14)}, {v: 19}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 15)}, {v: 19}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 16)}, {v: 18}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 17)}, {v: 17}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 18)}, {v: 17}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 19)}, {v: 12}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 20)}, {v: 13}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 21)}, {v: 11}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 22)}, {v: 10}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 23)}, {v: 10}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 24)}, {v: 8}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 25)}, {v: 6}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 26)}, {v: 6}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 27)}, {v: 5}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 28)}, {v: 4}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 29)}, {v: 4}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 3, 30)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 1)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 2)}, {v: 1}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 3)}, {v: 2}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 4)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 5)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 6)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 7)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 8)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 9)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 10)}, {v: 0}, {v: 0}, {v: 0}]}, {c: [{v: new Date(2010, 4, 11)}, {v: 0}, {v: 1}, {v: 1}]}, {c: [{v: new Date(2010, 4, 12)}, {v: 2}, {v: 1}, {v: 1}]}]}

这是Javascript，我用JQuery来获取JSON，也试过$.getJSON()

google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });

google.setOnLoadCallback(loadGraph);

function loadGraph() {

    $.get("/GraphDataHandler.axd", function(response) {
         drawGraph(response);
    });

}

function drawGraph(response) {
    var visualization = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
    var data = new google.visualization.DataTable(response, 0.6);
    visualization.draw(data, { title: 'Rankings', titleX: 'Date', titleY: 'Position', displayAnnotations: false, allowRedraw: true });
}

但是，如果我像下面这样将相同的 JSON 写入页面，它就可以正常工作!？

<script type="text/javascript">
//<![CDATA[
var gData = {cols: [{id: 'DATE', label: 'Date', type: 'date'}, {id: 'KEYWORD51', label: 'vw cheltenham', type: 'number'}], rows: [{c: [{v: new Date(2010, 3, 13)}, {v: 20}]}, {c: [{v: new Date(2010, 3, 14)}, {v: 19}]}, {c: [{v: new Date(2010, 3, 15)}, {v: 19}]}, {c: [{v: new Date(2010, 3, 16)}, {v: 18}]}, {c: [{v: new Date(2010, 3, 17)}, {v: 17}]}, {c: [{v: new Date(2010, 3, 18)}, {v: 17}]}, {c: [{v: new Date(2010, 3, 19)}, {v: 12}]}, {c: [{v: new Date(2010, 3, 20)}, {v: 13}]}, {c: [{v: new Date(2010, 3, 21)}, {v: 11}]}, {c: [{v: new Date(2010, 3, 22)}, {v: 10}]}, {c: [{v: new Date(2010, 3, 23)}, {v: 10}]}, {c: [{v: new Date(2010, 3, 24)}, {v: 8}]}, {c: [{v: new Date(2010, 3, 25)}, {v: 6}]}, {c: [{v: new Date(2010, 3, 26)}, {v: 6}]}, {c: [{v: new Date(2010, 3, 27)}, {v: 5}]}, {c: [{v: new Date(2010, 3, 28)}, {v: 4}]}, {c: [{v: new Date(2010, 3, 29)}, {v: 4}]}, {c: [{v: new Date(2010, 3, 30)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 1)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 2)}, {v: 1}]}, {c: [{v: new Date(2010, 4, 3)}, {v: 2}]}, {c: [{v: new Date(2010, 4, 4)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 5)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 6)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 7)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 8)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 9)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 10)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 11)}, {v: 0}]}, {c: [{v: new Date(2010, 4, 12)}, {v: 2}]}]};
//]]>
</script>

请告知我如何使用 JSON 调用使其正常工作？

谢谢

Answer 1

不确定这是否是原因，但请确保生成有效的 JSON。我在字符串中看到键没有包含在引号中，但它们必须是(它们必须是 strings)，以便成为有效的 JSON。

例如来自

{cols: [{id: 'DATE', label: 'Date', type: 'date'}, ...]}

到

{"cols": [{"id": "DATE", "label": "Date", "type": "date"}, ...]}

然后使用 .getJSON() 再试一次。

---

如果您将它直接放在您的代码中，它之所以有效，可能是因为在 JS 中不需要引用键(但作为 JSON 字符串，它将是无效的!)。

更新:

getJson 使用 .parseJSON()解析 JSON 字符串。正如您在文档中看到的那样，它只接受您的字符串不是的有效 JSON。