2
我正在製作一個顯示產品價格的線圖。問題是圖表有很大的幅度,所以它非常混亂。Google線圖 - 設置較小幅度
因此,如果Y軸的範圍會更大(比如說800 - 1500)的幅度會看起來更小的圖表會更好安排。
你知道該怎麼做嗎?
這是代碼,實際上它連接了多個數據集。
<script>
function range(start, end) {
var array = [];
for (var i = start; i < end; i++) {
array.push(i);
}
return array;
}
function drawChart() {
var google_chart_json = {{ google_chart|safe }};
var datas = [];
$.each(google_chart_json, function (key, val) {
var domain = key;
var data = new google.visualization.DataTable();
data.addColumn('datetime', domain + 'Date');
data.addColumn('number', domain);
$.each(val, function (_, scan) {
var year = scan[0][0];
var month = scan[0][1];
var day = scan[0][2];
var hour = scan[0][3];
var price = scan[1];
data.addRows([
[new Date(year, month-1, day, hour), price]
]);
});
datas.push(data);
});
var joinedData = datas[0];
$.each(datas, function (index, datatable) {
console.log('joining index ' + index)
if (index != 0) {
joinedData = google.visualization.data.join(joinedData, datatable, 'full', [[0, 0]], range(1, index + 1), [1]);
}
});
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(joinedData, {
height: 500,
width: 1000,
interpolateNulls: true,
explorer: {
maxZoomOut: 10,
keepInBounds: true
},
});
}
google.charts.load('current', {packages: ['corechart'], callback: drawChart});
{# google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});#}
</script>
是的,謝謝。是否有可能取決於最大值和最小值?我知道我可以通過JSON並找到最大值和最小值,但也許有一個更簡單的方法... –
是的,數據表有一個方法 - getColumnRange - 它獲取列索引並返回對象,其屬性爲min和最大 – WhiteHat