[英]Google Charts - how to add a fixed scale on an axis
I'm having trouble scaling my chart correctly. 我无法正确缩放图表。 My chart represents data for every hour of the day in a 24 hour format, meaning that I need the numbers 0-24 on my linechart.
我的图表以24小时格式表示一天中每个小时的数据,这意味着我需要在折线图中使用数字0-24。
I've tried adding the logScale
, minValue
and maxValue
properties to the hAxis
, but nothing is working. 我尝试将
logScale
, minValue
和maxValue
属性添加到hAxis
,但是没有任何效果。
As you can see on the chart, the hour
axis is not spanning a fixed axis from 0-24
hours, but instead from 9-15
hours. 从图表中可以看出,
hour
轴不是跨越0-24
小时的固定轴,而是跨越9-15
小时。
I also only have 3 rows in my data set, which reside on the hours 9
, 14
and 15
. 我也只有在我的数据集3行,其驻留在小时
9
, 14
和15
。 Despite this, the lines are spanning from 9-14
as if they have values; 尽管如此,这些行仍跨越
9-14
,好像它们具有值一样。 however there is no data there, so the lines should be running along the bottom at 0
between these two points. 但是,由于那里没有数据,因此这两点之间的线应在底部的
0
处延伸。
How can I put a fixed horizontal scale on my chart, and have individual values on my lines for each hour? 如何在图表上放置固定的水平比例,并在每小时的线数上设置单独的值?
Here's my code: 这是我的代码:
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var json = $.getJSON('my JSON data link', function(data)
{
var chartStructure = new google.visualization.DataTable();
var chartData = [];
chartStructure.addColumn('number', 'Hour');
chartStructure.addColumn('number', 'Pageviews');
chartStructure.addColumn('number', 'Unique Pageviews');
chartStructure.addColumn('number', 'Sales');
chartStructure.addColumn('number', 'Earnings in $AUD');
for (i = 0; i < data.length; i++)
{
chartData[i] = [];
chartData[i][0] = parseInt(data[i].hour);
chartData[i][1] = parseFloat(data[i].profit);
chartData[i][2] = parseFloat(data[i].profit);
chartData[i][3] = parseFloat(data[i].sales);
chartData[i][4] = parseFloat(data[i].profit);
// These chartData values are not correct because I am testing
chartStructure.addRows(chartData);
}
var options = {
hAxis: {
'minValue': 0,
'maxValue': 24
}
};
var chart = new google.charts.Line(document.getElementById('todays-total-sales'));
chart.draw(chartStructure, options);
});
}
$(window).resize(function()
{
drawChart();
});
Use viewWindow
. 使用
viewWindow
。
hAxis: {
title: 'Time',
viewWindow:{
max:1000,
min:-100
}
},
UPDATE UPDATE
If you are using MaterialCharts please note that the options have different syntax ! 如果您使用的是MaterialCharts,请注意,这些选项具有不同的语法 !
In order for you to be able to use the classic options, you need to change 为了使您能够使用经典选项,您需要进行更改
chart.draw(data, options);
to 至
chart.draw(data, google.charts.Line.convertOptions(options));
var options = {
title: "Posted Memes",
width: 450,
height: 300,
is3D:true,
bar: { groupWidth: "95%" },
legend: { position: "none" },
vAxis: {
title: 'No of Memes',
viewWindowMode: 'explicit',
viewWindow: {
max: 180,
min: 0,
interval: 1,
},
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.