Javascript 如何防止google可视化区域图中的多列重叠

我试图用一个ChartRange过滤器控制多个不同的区域图表。我的代码在这里：基于此。 我有一个google visualization arrayToDataTable数组，有两个数据列。问题是，第一个图表一次显示两列数据，而每个图表只显示其列。下面是我的代码：

HTML

JS

google.charts.load（'current'，{//加载可视化API和组合图表包。
包：['corechart'，'controls']}）；
google.charts.setOnLoadCallback（drawCharts）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[{label:'Date'，id:'Date'，type:'Date'}，
{label:'Score'，id:'Score'，type:'number'}，
{label:'Items'，id:'Items'，type:'number'}]，
[新日期（“2015年3月10日”），1000，空]，
[新日期（“10/20/15”），2000年，无效]，
[新日期（“2015年10月23日”），1500，空]，
[新日期（2015年10月31日），1700，无效]，
[新日期（“2015年5月10日”），空，1000]，
[新日期（“2015年10月25日”），无效，1300]，
[新日期（“2015年10月30日”），无效，1700]，
]);
//创建一个仪表板。
var myDashboard=new google.visualization.Dashboard（document.getElementById（'areaChart'）；
//创建日期范围滑块
var myDateSlider=new google.visualization.ControlWrapper({
“controlType”：“ChartRangeFilter”，
“集装箱船”：“控制室”，
“选项”：{
//按日期轴过滤。
'filterColumnLabel'：'Date'，
“用户界面”：{
“图表选项”：{
身高:60,，
},
}
},
“州”：{
}
});
//连接到ChartRangeFilter控件的折线图1
var lineChart1=新的google.visualization.ChartWrapper({
图表类型：“区域图表”，
集装箱：“chartScore”，
选项：{
宽度：500，
身高：300，
图例：{位置：'无'}，
标题：“得分”，
变量：{minValue:0，maxValue:100，}，
hAxis:{网格线：{颜色：'透明'}，
真的吗
},
视图：{
列：[0，1]//使用列0和1
}
}});
//我还想连接到ChartRangeFilter控件的折线图2
var lineChart2=新的google.visualization.ChartWrapper({
图表类型：“区域图表”，
集装箱运输：“chartItems”，
选项：{
宽度：500，
身高：300，
图例：{位置：'无'}，
标题：“项目”，
变量：{minValue:0，maxValue:100，}，
hAxis:{gridlines:{color:'transparent'}}，
真的吗
},
视图：{
列：[0，2]//使用列0和列2
}
});
//将lineChart1绑定到仪表板和控件
绑定（myDateSlider，[lineChart1，lineChart2]）。绘制（数据）；

---

}线条图1的选项有一个括号不合适，
hAxis之后需要一个

因此，

视图

是

选项

将

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

看

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

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