Google图表选择侦听器返回错误的列数 [英] Google charts select listener returns wrong column number
问题描述
下面是我的google图表代码,点击时返回错误的列号
Below is my google chart code which is returning wrong column number on click
function bind()
{
var data = new google.visualization.DataTable(Json);
if (data.getNumberOfRows() > 0) {
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
, 3,
{
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}
, 4,
{
calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"
}, 5,
{
calc: "stringify",
sourceColumn: 5,
type: "string",
role: "annotation"
}
]);
options = {
width: default_width,
height: default_height,
backgroundColor: default_backgroundColor,
legend: { position: "top" },
fontName: default_fontName,
fontSize: default_fontSize,
chartArea: default_chartArea,
colors: default_colors
}
chart = new google.visualization.ColumnChart(document.getElementById(Control));
chart.draw(view, options);
google.visualization.events.addListener(chart, 'select', GetChartOnClickData);
function GetChartOnClickData() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var col = chart.getSelection()[0]['column'];
var colname = data.getColumnLabel(col);
}
}
在 var col
变量,当我点击最后一列时,列的数字返回为9,而我在图表中只有从0到5的列。
In the var col
variable, I get column number returned as 9 when I click the last column, whereas I have only columns only from 0 to 5 in my chart.
chart.draw(data, options);
它返回正确的列号。我想创建视图,以便我可以在图表上显示数字。
it returns me the proper column number. I want to make the view so that I can show numbers on the chart. How can I do it with returning the proper column number on click?
推荐答案
当您设置 $ c
$ b
When you're setting the setView
of your view
with
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}
等,它看起来像google图表模拟一个额外的列注释,所以如果你开始3列 [Date,Sales,Expenses]
,然后使用您的方法添加注释,最后会有5列:
[日期,销售,销售注释,费用,费用说明]
etc, it looks like google charts simulate an extra column for the annotation so if you start with 3 columns [Date, Sales, Expenses]
and then add annotations with your method you would end up with 5 columns:[Dates, Sales, Sales Annotation, Expenses, Expenses Annotation]
因此,当您尝试接收列名称 var colname = data.getColumnLabel );
由于所有这些模拟的注释列,您将(因为您遇到)有高数字。
So when you then try to recieve the column name with var colname = data.getColumnLabel(col);
you will (as you're experiencing) have a way to high number due to all these simulated annotation columns.
请尝试使用 var colname = view.getColumnLabel(col);
(更改数据
到 / code>它会工作更好。
If you instead try with var colname = view.getColumnLabel(col);
(change data
to view
it will work better.
我把一个快速jsfiddle试试: 链接 。
I threw together a quick jsfiddle to try it out: Link.
对于未来的问题,一个jsfiddle或同等级的所有人来玩你的数据,所以我们确定我们看着同样的问题: - )
For future questions it would be highly appreciated if you provided a jsfiddle or equivalent for everyone to play around with your data, so we're sure that we're looking at the same problem :-)
这篇关于Google图表选择侦听器返回错误的列数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!