Google Chart API控件范围和snapToData问题 [英] Google Chart API Control range and snapToData issues
本文介绍了Google Chart API控件范围和snapToData问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用谷歌图表API以及由测距仪控制的线形图。我陷入了两个烦人的问题：
- 该控件在其设置的数据值之前和之后有额外的空间，留下一个控件可以滑动的空间。
- 我似乎无法使控件捕捉到数据值。
如果您可以给我一个指针，我在做什么错误，我会很感激。
I在这里设置JSfiddle： http://jsfiddle.net/Db4fm/2/ >
非常感谢！
JS
function drawChart（）{
var activity_breakdown = [
['Text Index'，'Numeric Index'，'totals'，'Value 1'，'Value 2'，'值3'，
'值4'，'值5'，'值6'，'值7']，
['W15'，1，13，2，0，
['W16'，2，20，0，1，10，3，0，0，2]，
['W17'，3，
['W18'，4，31，0，2，10，4，1，0，3]，
[ 'W19'，5,11,1,0,10,2,0,3,0]，
['W20'，6,26,0,0,10,6,0,0,4] ，
['W21'，7,39,2,0,30,2,1,2,0]，
['W22'，8，41，0，3，10，7， 0，0，0]，
['今日'，9，44，0 ，1，20，2，1，0，5]
];
//数据表
var data1 = google.visualization.arrayToDataTable（activity_breakdown）;
$ b $ // Chart
var chart1 = new google.visualization.ChartWrapper（{
chartType：'ColumnChart'，
containerId：'chart_activity'，
dataTable：data，
options：{
width：950，
height：300，
chartArea：{
left：40，
top：20，
width：700，
height：250
}，
legend：{
position：'right'，
textStyle：{
fontSize ：13
}
}
}，
查看：{
列：[0，3，4，5，6，7，8，9]
}
}）;
var control1 = new google.visualization.ControlWrapper（{$ b $'controlType'：'ChartRangeFilter'，
'containerId'：'control_activity'，
'options' ：{
//过滤日期轴
'filterColumnIndex'：1，
'ui'：{
'chartType'：'LineChart'，
' snapToData'：true，//这个bugger不工作
'chartOptions'：{
width：950，
height：50，
chartArea：{
left： 40，
top：0，
width：700，
height：50
}，
'hAxis'：{
textPosition：'none'
}
}，
'chartView'：{
'列'：[0，2]
}，
'minRangeSize'：1
}
}，
'state'：{
'range'：{
'start'：7，
'end '：8
}
}
}）;
var dashboard1 =新的google.visualization.Dashboard（
document.getElementById（'dashboard_activity'））;
//绘制
dashboard1.bind（control1，chart1）;
dashboard1.draw（data1）;
google.visualization.events.addListener（control1，'statechange'，function（）{
var v = control1.getState（）;
document.getElementById（'dbgchart' ）.innerHTML = v.range.start +' - >'+
v.range.end;
return 0;
}）;
// FSM知道为什么，但没有这行代码将不会运行...
var data = new google.visualization.DataTable（）;
$ b google.load（'visualization'，'1.1'，{
packages：['corechart'，'controls']
}）;
google.setOnLoadCallback（drawChart）;
HTML
< div id =dashboard_activity>
< div id =chart_activity>< / div>
< div id =control_activity>< / div>
< / div>
< p>调试范围：< span id =dbgchart> Init< / span>< / p>
解决方案
数据值之前和之后的空格是结果将范围过滤器图表的域轴设置为轴0，这是一个字符串型轴。如果您希望该行边对边，则域轴必须是连续的数据类型（数字，日期，日期时间，timeofday）。如果您将控件图表的 view.columns 参数更改为 [1,2] ，则空格将消失：
var control1 = new google.visualization.ControlWrapper（{
controlType：'ChartRangeFilter'，
containerId： 'control_activity'，
options：{
filterColumnIndex：1，
ui：{
chartType：'LineChart'，
snapToData：true，//这个bugger不是工作
chartOptions：{
width：950，
height：50，
chartArea：{
left：40，
top：0，
宽度：700，
高度：50
}，
hAxis：{
textPosition：'none'
}
}，
chartView ：{
列：[1，2]
}，
minRangeSize：1
}
}，
state：{
range：{
start：7，
end：8
}
}
}）;
我无法将您的问题复制到 ui.snapToData 选项。
更新了jsfiddle以及修正： http://jsfiddle.net/asgallant/Db4fm/3/
Using google charts API with line chart controlled by range finder.
I am stuck with two annoying issues:
- The control has extra space before and after the data values it was set to follow, leaving an ugly space the control can slide to.
- I can not seem to get the control to snap to data value.
If you can give me a pointer what I am doing wrong I will appreciate it a lot.
I set a JSfiddle here: http://jsfiddle.net/Db4fm/2/
Thank you very much!
JS
function drawChart() {
var activity_breakdown = [
['Text Index', 'Numeric Index', 'totals', 'Value 1', 'Value 2', 'Value 3',
'Value 4', 'Value 5', 'Value 6', 'Value 7'],
['W15', 1, 13, 2, 0, 20, 2, 1, 0, 0],
['W16', 2, 20, 0, 1, 10, 3, 0, 0, 2],
['W17', 3, 19, 3, 0, 20, 2, 0, 2, 0],
['W18', 4, 31, 0, 2, 10, 4, 1, 0, 3],
['W19', 5, 11, 1, 0, 10, 2, 0, 3, 0],
['W20', 6, 26, 0, 0, 10, 6, 0, 0, 4],
['W21', 7, 39, 2, 0, 30, 2, 1, 2, 0],
['W22', 8, 41, 0, 3, 10, 7, 0, 0, 0],
['Today', 9, 44, 0, 1, 20, 2, 1, 0, 5]
];
// Data table
var data1 = google.visualization.arrayToDataTable(activity_breakdown);
// Chart
var chart1 = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_activity',
dataTable: data,
options: {
width: 950,
height: 300,
chartArea: {
left: 40,
top: 20,
width: 700,
height: 250
},
legend: {
position: 'right',
textStyle: {
fontSize: 13
}
}
},
view: {
columns: [0, 3, 4, 5, 6, 7, 8, 9]
}
});
var control1 = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_activity',
'options': {
// Filter by the date axis.
'filterColumnIndex': 1,
'ui': {
'chartType': 'LineChart',
'snapToData': true, // this bugger is not working
'chartOptions': {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
'hAxis': {
textPosition: 'none'
}
},
'chartView': {
'columns': [0, 2]
},
'minRangeSize': 1
}
},
'state': {
'range': {
'start': 7,
'end': 8
}
}
});
var dashboard1 = new google.visualization.Dashboard(
document.getElementById('dashboard_activity'));
// Draw
dashboard1.bind(control1, chart1);
dashboard1.draw(data1);
google.visualization.events.addListener(control1, 'statechange', function () {
var v = control1.getState();
document.getElementById('dbgchart').innerHTML = v.range.start + ' -> ' +
v.range.end;
return 0;
});
// FSM knows why but without this line this line the code will not run...
var data = new google.visualization.DataTable();
}
google.load('visualization', '1.1', {
packages: ['corechart', 'controls']
});
google.setOnLoadCallback(drawChart);
HTML
<div id="dashboard_activity">
<div id="chart_activity"></div>
<div id="control_activity"></div>
</div>
<p>Debug range: <span id="dbgchart">Init</span></p>
解决方案
The space before and after your data values is a result of setting your range filter's chart's domain axis to axis 0, which is a "string" type axis. If you want the line to go edge-to-edge, the domain axis has to be a continuous data type ("number", "date", "datetime", "timeofday"). If you change the control's chart's view.columns parameter to [1, 2], the spaces will go away:
var control1 = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_activity',
options: {
filterColumnIndex: 1,
ui: {
chartType: 'LineChart',
snapToData: true, // this bugger is not working
chartOptions: {
width: 950,
height: 50,
chartArea: {
left: 40,
top: 0,
width: 700,
height: 50
},
hAxis: {
textPosition: 'none'
}
},
chartView: {
columns: [1, 2]
},
minRangeSize: 1
}
},
state: {
range: {
start: 7,
end: 8
}
}
});
I couldn't replicate your problem with the ui.snapToData option.
Updated jsfiddle with fix: http://jsfiddle.net/asgallant/Db4fm/3/
这篇关于Google Chart API控件范围和snapToData问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
