Google图表.在一段时间内固定的位置

Question

我在创建谷歌图表时遇到了几个问题，我请求你帮助我:

1. 我无法将图表的初始位置设置在当前周的日期上。
2. 在这方面，当你点击过滤器按日期按钮时，控制台出现错误-"无法读取未定义"的属性'开始'"只有在范围滑块
上选择间隔后才能绘制图表

下面是我的代码:

google.charts.load('current', {
packages: ['controls', 'lineChart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', '');
data.addColumn('number', 'Mgr');
data.addColumn('number', 'Glencore Т');
data.addColumn('number', 'Cargill');
data.addColumn('number', 'OZK');

data.addRows([
[new Date(2021,01,13), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,14), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,15), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,16), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,18), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,19), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,20), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,21), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,01,22), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,02,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,02,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,02,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,02,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,02,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,02,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,03,02), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,03,04), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,03,08), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,03,11), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,03,22), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,04,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,04,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,04,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,04,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,04,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,04,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,05,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,05,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,05,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,05,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,05,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,05,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,06,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,06,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,06,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,06,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,06,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,06,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,07,26), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,07,27), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,07,28), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,07,29), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,07,30), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,07,31), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,08,01), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,08,12), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,08,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,09,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,09,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,09,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,09,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,09,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,09,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,10,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,10,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,10,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,10,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,10,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,10,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,11,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,11,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,11,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,11,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,11,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,11,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],

[new Date(2021,12,03), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,12,05), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,12,06), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,12,10), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,12,17), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
[new Date(2021,12,23), Math.random() * 10000, Math.random() * 10000, Math.random() * 10000, Math.random() * 10000],
]);

var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter-range',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'LineChart',
chartOptions: {
chartArea: {
width: '100%',
left: 36,
right: 18
},
height: 72
}
}
}
});

var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart-area',
options: {
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});

let sortButton = document.getElementsByClassName('graph-block__btn') || false;

for (var i in sortButton) {
sortButton[i].onclick = function(sender) {
const active = document.querySelector(".active");
if (active) {
active.classList.remove("active");
}
this.classList.add("active");
var currentRange = rangeFilter.getState();
visibleRange = parseInt(sender.target.getAttribute('data-range'));
if (isNaN(visibleRange)) {
rangeFilter.setState(null);
} else {
rangeFilter.setState({
range: {
start: currentRange.range.start,
end: new Date(currentRange.range.start.getTime() + visibleRange)
}
});
}
rangeFilter.draw();
};
}

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(rangeFilter, chart);
dashboard.draw(data);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="graph-block__chart" id="dashboard">
<div id="filter-range" ></div>
<div class="graph-block__control-list" id="range-buttons">
<button class="graph-block__btn active" data-range="604800000">Week</button>
<button class="graph-block__btn" data-range="2592000000">Month</button>
<button class="graph-block__btn" data-range="7776000000">3 Month</button>
<button class="graph-block__btn" data-range="15552000000">6 Month</button>
<button class="graph-block__btn" data-range="31104000000">1 Year</button>
</div>
<div id="categoryFilter_div"></div>
<div id="chart-area" style="width: 100%; height: 520px"></div>
</div>

我真的很感激你的帮助

Answer 1

问题解决了，我没有注意到初始化时的错误(有必要将线形图更改为corechart)