Google Chart API控制范围和snapToData问题

Question

使用谷歌图表API，使用测距仪控制的折线图
我遇到了两个烦人的问题：

1. 控件在设置为跟随的数据值前后都有额外的空间，留下了控件可以滑动到的丑陋空间
2. 我似乎无法获得捕捉到数据值的控件

如果你能告诉我我做错了什么，我会非常感激的
我在这里设置了一个JSfiddle：http://jsfiddle.net/Db4fm/2/

非常感谢！

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>

Answer 1

数据值前后的空格是将范围过滤器图表的域轴设置为轴0的结果，轴0是"字符串"类型的轴。如果你想让行从边到边，域轴必须是一个连续的数据类型（"number"、"date"、"datetime"、"timeofday"）。如果将控件图表的view.columns参数更改为[1, 2]，空格将消失：

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
        }
    }
});

我无法用ui.snapToData选项复制您的问题。

更新jsfiddle并修复：http://jsfiddle.net/asgallant/Db4fm/3/

Answer 2

将第67行更改为：

'columns': [1, 2]

jsFiddle：http://jsfiddle.net/Db4fm/4/