Getting无法读取属性'x'的null与谷歌图表LineChart
Getting Cannot read property 'x' of null with google charts LineChart
我有一个谷歌图表，当我把鼠标放在图例标签上时，它一直说无法读取null的属性'x'，我不知道为什么。
所有数据都是来自ajax get的json格式，并且是有效的json，其中没有null值
代码是这样的：
var dt = new google.visualization.DataTable(data[4]);
var options = {
vAxes: { 0: { logScale: false, title: 'Cash' } },
xAxes: { 0: { logScale: false, title: 'Months' } }
};
var chart = new google.visualization.LineChart(document.getElementById("chart_fullsite_cash")); chart.draw(dt, options);
数据[4]中的json是这样的：
{
"cols":[
{
"type":"date",
"id":"Month",
"label":"Month"
},
{
"type":"number",
"id":"1",
"label":"label1"
},
{
"type":"number",
"id":"2",
"label":"label2"
},
{
"type":"number",
"id":"3",
"label":"label3"
},
{
"type":"number",
"id":"4",
"label":"label4"
},
{
"type":"number",
"id":"5",
"label":"label5"
},
{
"type":"number",
"id":"6",
"label":"label6"
}
],
"rows":[
{
"c":[
{
"v":"Date(2012, 7, 31)",
"f":"Aug 2012"
},
{
"v":3937.78,
"f":"$3,937.78"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 7, 31)",
"f":"Aug 2012"
},
{
"v":0
},
{
"v":348800,
"f":"$348,800.00"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 7, 31)",
"f":"Aug 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":4085.71,
"f":"$4,085.71"
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 7, 31)",
"f":"Aug 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":2332.41,
"f":"$2,332.41"
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 8, 30)",
"f":"Sep 2012"
},
{
"v":32796.06,
"f":"$32,796.06"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 8, 30)",
"f":"Sep 2012"
},
{
"v":0
},
{
"v":1432204.38,
"f":"$1,432,204.38"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 8, 30)",
"f":"Sep 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":30211.84,
"f":"$30,211.84"
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 8, 30)",
"f":"Sep 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":26478.86,
"f":"$26,478.86"
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 9, 31)",
"f":"Oct 2012"
},
{
"v":34074.92,
"f":"$34,074.92"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 9, 31)",
"f":"Oct 2012"
},
{
"v":0
},
{
"v":1589939.79,
"f":"$1,589,939.79"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 9, 31)",
"f":"Oct 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":52323.63,
"f":"$52,323.63"
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 9, 31)",
"f":"Oct 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":33100.46,
"f":"$33,100.46"
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 10, 30)",
"f":"Nov 2012"
},
{
"v":13243.12,
"f":"$13,243.12"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 10, 30)",
"f":"Nov 2012"
},
{
"v":0
},
{
"v":451904.1,
"f":"$451,904.10"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 10, 30)",
"f":"Nov 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":7315,
"f":"$7,315.00"
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 10, 30)",
"f":"Nov 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":11641.52,
"f":"$11,641.52"
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2012, 10, 30)",
"f":"Nov 2012"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0,
"f":"$0.00"
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2013, 2, 31)",
"f":"Mar 2013"
},
{
"v":0
},
{
"v":236,
"f":"$236.00"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2013, 9, 31)",
"f":"Oct 2013"
},
{
"v":0
},
{
"v":1010,
"f":"$1,010.00"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
}
]
},
{
"c":[
{
"v":"Date(2013, 10, 30)",
"f":"Nov 2013"
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":0
},
{
"v":21216.01,
"f":"$21,216.01"
}
]
}
]
}
我不知道发生了什么……如果我把Date列改为String类型，那么它工作得很好，但图形会从根本上改变它的形状。
我不确定到底发生了什么，但我在您的数据中看到，您有多个日期相同的行，例如：
{"c":[{"v":"Date(2012, 7, 31)","f":"Aug 2012"},{"v":3937.78,"f":"$3,937.78"},{"v":0},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"Date(2012, 7, 31)","f":"Aug 2012"},{"v":0},{"v":348800,"f":"$348,800.00"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"Date(2012, 7, 31)","f":"Aug 2012"},{"v":0},{"v":0},{"v":4085.71,"f":"$4,085.71"},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"Date(2012, 7, 31)","f":"Aug 2012"},{"v":0},{"v":0},{"v":0},{"v":2332.41,"f":"$2,332.41"},{"v":0},{"v":0}]},
当我在每个日期删除额外的行时，问题就消失了。使用这种结构的目的是什么？看起来您正试图在图表中创建列，您可以使用ColumnChart（如果希望将列和行组合在一起，则可以使用ComboChart）来完成此操作。
相关文章：
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 谷歌放置API:按国家或餐馆名称搜索餐馆
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在谷歌地图上获取事件的x，y坐标
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 谷歌文档表面引擎
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- Getting无法读取属性'x'的null与谷歌图表LineChart
- 加载谷歌LineChart动画
- 谷歌图表LineChart选项不完全工作(双y轴)
- 滚动LineChart动画与谷歌图表
