javascript - 如何防止谷歌可视化区域图中多列重叠

Question

我正在尝试使用一个 ChartRangeFilter 控制多个不同的面积图。我的代码在这里:jsfiddle基于此 example 。我有一个带有 2 个数据列的谷歌可视化 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 是选项的一部分

将 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 ...