Question

当我使用ChartRangeFilter过滤我的LineChart时，我想我通过hAxis.ticks设置的LineChart的滴答也将被过滤，但事实并非如此。如果我尝试使用范围过滤器缩放图表，则无论如何都会显示hAxis上的所有刻度。我该如何解决这个问题？

function draw_dashboard(data) {
var chart_data = new google.visualization.DataTable(data);

var dashboard = new google.visualization.Dashboard(
   document.getElementById('dashboard'));

var control = new google.visualization.ControlWrapper({
 'controlType': 'ChartRangeFilter',
 'containerId': 'control',
 'options': {
   // Filter by the date axis.
   'filterColumnIndex': 0,
   'ui': {
     'chartType': 'LineChart',
     'chartOptions': {
       'chartArea': {'width': '90%'},
       'hAxis': {'baselineColor': 'none'}
     },
     // 6 months in milliseconds = 24 * 60 * 60 * 30 * 6 * 1000 = 15552000000
     'minRangeSize': 15552000000
   }
 }
});

var chart = new google.visualization.ChartWrapper({
 'chartType': 'LineChart',
 'containerId': 'chart',
 'options': {
   // Use the same chart area width as the control for axis alignment.
   'chartArea': {'height': '55%', 'width': '90%'},
   'legend': {'position': 'none'},
   'hAxis': {
     'slantedTextAngle': 90,
     'ticks': chart_data.getDistinctValues(0)
     'showTextEvery': 1
   }
 }
});

dashboard.bind(control, chart);
dashboard.draw(chart_data);
};

Answer 1

如果指定hAxis.ticks选项，则无论传递给图表的数据是什么，这些值始终都会出现在轴上（因为图表不知道数据以任何方式过滤）。如果您还要过滤滴答，则必须为过滤器设置'statechange'事件处理程序，以获取过滤后的数据并相应地设置hAxis.ticks选项：

google.visualization.events.addListener(control, 'statechange', function () {
    var filteredData = chart.getDataTable();
    chart.setOption('hAxis.ticks', filteredData.getDistinctValues(0));
    chart.draw();
});

Answer 2

问题出在hAxis.ticks设置中。如果你使用

ticks: data.getDistinctValues(0),

然后将ticks设置为一个与输入数据长度相同的数组。你会得到每个月的刻度线。另外，使用选项：

showTextEvery: 1

刚刚确认（要显示多少个水平轴标签，其中1表示显示每个标签）。每个刻度都有标签。使用过滤器没有太大的变化。

如果您注释掉tick选项，hAxis上的标签将根据过滤数据的范围进行更改。

使用ChartRangeFilter时，未在折线图中过滤刻度

2 个答案: