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的结果，这是一个“字符串”类型的轴。如果希望该行边缘到边缘，则域轴必须是连续数据类型（“数字”，“日期”，“日期时间”，“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 with fix：http://jsfiddle.net/asgallant/Db4fm/3/

Answer 2

将第67行更改为：

'columns': [1, 2]

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