Question

我正在尝试使用一个ChartRangeFilter控制多个不同的areacharts。我的代码在此处：jsfiddle基于此example。我有一个带有2个数据列的google visualization arrayToDataTable数组。问题是，当每个图表只显示它的列时，第一个图表一次显示2列数据。以下是我的代码：

HTML

<div id="areaChart">
    <div id="myAreaChart">
        <div id="chartScore"></div>
        <div id="chartItems"></div>
    </div>
    <div id="control_div"></div>
</div>

JS

google.charts.load('current', {// Loads the Visualization API and the combo-chart package.
packages: ['corechart','controls']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
    var data = google.visualization.arrayToDataTable([
      [{label: 'Date', id: 'date', type: 'date'},
      {label: 'Score', id: 'score', type: 'number'},
      {label: 'Items', id: 'items', type: 'number'}],
      [new Date("10/03/15"), 1000, null],
      [new Date("10/20/15"), 2000, null],
      [new Date("10/23/15"), 1500, null],
      [new Date("10/31/15"), 1700, null],
      [new Date("10/05/15"), null, 1000],
      [new Date("10/25/15"), null, 1300],
      [new Date("10/30/15"), null, 1700],
]);
// Create a dashboard.
var myDashboard = new google.visualization.Dashboard(document.getElementById('areaChart'));
// Create a date range slider
var myDateSlider = new google.visualization.ControlWrapper({
    'controlType': 'ChartRangeFilter',
    'containerId': 'control_div',
    'options': {
        // Filter by the date axis.
        'filterColumnLabel': 'Date',
        'ui': {
            'chartOptions': {
                'height' : 60,
            },
        }
    },
     'state': {
        <!-- 'range': {'start': new Date("10/03/15"),'end'  : new Date("09/02/16")} -->
    }
});

// Line chart 1 that is hooked up to ChartRangeFilter control
var lineChart1 = new google.visualization.ChartWrapper({
    chartType : 'AreaChart',
    containerId : 'chartScore',
    options: {
    width: 500,
    height: 300,
    legend: {position: 'none'},
    title: 'Score',
    vAxis: {minValue: 0, maxValue: 100,},
            hAxis: {gridlines: {color: 'transparent'},
    interpolateNulls: true
    },
    view: {
        columns: [0, 1] // use columns 0 and 1
    }
}});
// Line chart 2 that I would like to also hook up to ChartRangeFilter control
var lineChart2 = new google.visualization.ChartWrapper({
    chartType: 'AreaChart',
    containerId: 'chartItems',
    options: {
    width: 500,
    height: 300,
    legend: {position: 'none'},
    title: 'Items',
    vAxis: {minValue: 0, maxValue: 100,},
            hAxis: {gridlines: {color: 'transparent'}},
    interpolateNulls: true
    },
    view: {
        columns: [0, 2] // use columns 0 and 2
    }
});
// Bind lineChart1 to the dashboard, and to the controls
myDashboard.bind(myDateSlider, [lineChart1, lineChart2]).draw(data);

}

Answer 1

lineChart1的选项有一个不合适的括号，
在hAxis之后需要一个

因此，view是options

的一部分

使用以下内容替换lineChart1 ...

var lineChart1 = new google.visualization.ChartWrapper({
    chartType : 'AreaChart',
    containerId : 'chartScore',
    options: {
        width: 500,
        height: 300,
        legend: {position: 'none'},
        title: 'Score',
        vAxis: {minValue: 0, maxValue: 100,},
        hAxis: {gridlines: {color: 'transparent'}},
        interpolateNulls: true
    },
    view: {
        columns: [0, 1] // use columns 0 and 1
    }
});

请参阅forked fiddle ...

如何防止多个列在谷歌可视化areachart中重叠

1 个答案: