Google Chart：如何绘制LineChart的纵轴？ [英] Google Chart: How to draw the vertical axis for LineChart?
问题描述
我想在我的网页上绘制谷歌的折线图！这是我的js代码：
函数drawVisualization（）{
//创建并填充数据表。
var data = google.visualization.arrayToDataTable（[
['x'，'Cats'，'Blanket 1']，
['A'，1，10]，
['B'，2,5]，
['C'，4，12]，
['D'，8,5]
]）;
var options = {
curveType：'function'，
lineWidth：2，
hAxis：{
baselineColor：'red'，
textStyle：{color：'＃000'，fontName：'Arial'，fontSize：10}，
gridlines：{color：'＃f3f3f3'，count：5}
}，
vAxis：{
baseline：0，
viewWindowMode：explicit，
viewWindow：{min：0}，
gridlines：{color：'＃f3f3f3'，count：6 }
}
};
new google.visualization.LineChart（document.getElementById（'visualization'））。
draw（数据，选项）;
}
但是，结果图表没有绘制垂直轴线。如何添加垂直轴线如下图所示：
非常感谢！
网格线不支持类别轴。由于所涉及的数据使用字符串作为类别（X轴标签），因此无法分辨它们应该如何分割。然而，你可以通过以下技术来解决这个问题。
诀窍1：打开你的数据
所以现在你有字符串，这意味着没有网格线。我们想要网格线，所以我们必须纠正这个小问题。因此，我们将第一列（X）转换为一个数字，并在格式上添加一个格式，以便在鼠标悬停在它上面（和图例中）时显示'A'或'B'或'C'：
var data = new google.visualization.DataTable（）;
data.addColumn（'number'，'x'）;
data.addColumn（'number'，'Cats'）;
data.addColumn（'number'，'Blanket 1'）;
data.addRows（[
[{v：1，f：'A'}，1，10]，
[{v：2，f：'B'}，2， 5]，
[{v：3，f：'C'}，4，12]，
[{v：4，f：'D'}，8,5]
]）;
虽然这并不能解决问题。现在我们在底部轴上有数字，以奇怪的0.8个间隔切断。所以我们想解决这个问题。不幸的是，使用hAxis，你不能设置最小值/最大值并使其保持不变（我不知道为什么）。我们可以通过在我们的选项中加入baseline：0来修复min。
为了获得最大值，我们必须添加一个虚拟系列。
放在一起，我们得到这个：
$ p $函数drawVisualization（）{
//创建并填充数据表。
var data = new google.visualization.DataTable（）;
data.addColumn（'number'，'x'）;
data.addColumn（'number'，'Cats'）;
data.addColumn（'number'，'Blanket 1'）;
//这个虚拟系列是从0-5扩展图表以填充
data.addColumn（'number'，null）;
data.addRows（[
[{v：1，f：'A'}，1，10，null]，
[{v：2，f：'B'}， 2，5，null]，
[{v：3，f：'C'}，4，12，null]，
[{v：4，f：'D' 5，null]，
[{v：5，f：''}，null，null，{v：0，f：''}]
]）;
options = {
curveType：'function'，
lineWidth：2，
hAxis：{
//在0 $ b $处显示基线b baseline：0，
// 6个网格线，4个标签+左右填充
gridlines：{
count：6
}，
}，
vAxis：{
baseline：0，
}，
系列：[
{}，
{}，
//隐藏我们的虚拟系列
{
lineWidth：0，
pointsize：0，
visibleInLegend：false
}，
]
};
chart1 = new google.visualization.LineChart（document.getElementById（'visualization'））;
chart1.draw（data，options）;
}
现在看起来更像你想要的。有两个主要问题。一个是，如果你将鼠标悬停在图表右下方，会弹出一个空白的工具提示（这不是我希望的一个大问题，但是如果使图表与事件交互，可能必须执行一些错误陷印）。另一个是我们图表的底部显示的是数字，而不是字母。
不幸的是，没有简单的方法将数字格式化为字母（至少在Google实现整个ICU模式集，而不仅仅是日期/数字）。所以我们需要制定另一个解决方法。基本上，我所做的是创建一个全新的图表来制作标签。然后我将其格式化为隐藏除标签之外的所有内容，并确保它与上面的图表水平排列。
函数drawVisualization（）{
//创建并填充数据表。
var data = new google.visualization.DataTable（）;
data.addColumn（'number'，'x'）;
data.addColumn（'number'，'Cats'）;
data.addColumn（'number'，'Blanket 1'）;
//这个虚拟系列是从0-5扩展图表以填充
data.addColumn（'number'，null）;
data.addRows（[
[{v：1，f：'A'}，1，10，null]，
[{v：2，f：'B'}， 2，5，null]，
[{v：3，f：'C'}，4，12，null]，
[{v：4，f：'D' 5，null]，
[{v：5，f：''}，null，null，{v：0，f：''}]
]）;
options = {
curveType：'function'，
lineWidth：2，
hAxis：{
//在0 $ b $处显示基线b baseline：0，
// 6个网格线，4个标签+左右填充
gridlines：{
count：6
}，
//隐藏我们标签
textPosition：'none'
}，
vAxis：{
baseline：0，
}，
series：[
{} ，
{}，
//隐藏我们的虚拟系列
{
lineWidth：0，
pointsize：0，
visibleInLegend：false
}，
]
};
//为轴标签添加虚拟数据
var data2 = new google.visualization.DataTable（）;
data2.addColumn（'string'，'x'）;
data2.addColumn（'number'，'dummy'）;
data2.addRows（[
['A'，null]，
['B'，null]，
['C'，null]，
[ 'D'，null]
]）;
chart1 = new google.visualization.LineChart（document.getElementById（'visualization'））;
chart1.draw（data，options）;
chart2 = new google.visualization.LineChart（document.getElementById（'visualization2'））;
chart2.draw（data2，
{
chartArea：{
top：0，
height：0％
}，
min：0，
max：0，
hAxis：{
baselineColor：'#FFFFFF'
}，
vAxis：{
baselineColor：'＃ FFFFFF'，
方向：-1，
textPosition：'none'，
gridlines：{
color：'#FFFFFF'
}
}
}）;
}
只需在第一个下面创建另一个，然后使用CSS对齐它漂浮在同一个位置，或者不是），它看起来像标签属于上面的图表。
它不是光荣的，但它的作品。 p>
I want to draw a Google's line chart in my web page! Here is my js code:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1'],
['A', 1, 10],
['B', 2, 5],
['C', 4, 12],
['D', 8, 5]
]);
var options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
baselineColor: 'red',
textStyle: {color: '#000', fontName: 'Arial', fontSize: 10},
gridlines: { color: '#f3f3f3', count: 5}
},
vAxis: {
baseline: 0,
viewWindowMode: "explicit",
viewWindow:{ min: 0 },
gridlines: { color: '#f3f3f3', count: 6}
}
};
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, options);
}
However, the result chart is drawing without any vertical axis line. How I can add the vertical axis lines as below images: Thank you so much!
Gridlines are not supported for category axes. Because the data in question is using strings as the categories (X-axis labels), there is no way to tell how they "should" be split. You can get around this, however, with the following techniques.
Trick 1: Turn your Data Numerical
So right now you have strings which means no gridlines. We want gridlines though, so we have to correct that small problem. So we turn our first column (X) in to a number, with a format on it so it says 'A' or 'B' or 'C' when you mouse over it (and in the legend):
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addRows([
[{v: 1, f:'A'}, 1, 10],
[{v: 2, f:'B'}, 2, 5],
[{v: 3, f:'C'}, 4, 12],
[{v: 4, f:'D'}, 8, 5]
]);
This doesn't solve the problem though. Now we have numbers on the bottom axis, cut off at weird 0.8 intervals. So we want to fix that. Unfortunately, with the hAxis, you can't set a min/max value and have it stick (I don't know why). We can fix the min by adding baseline: 0 to our options.
To get the max, we have to add a dummy series.
Put it all together, and we get this:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
// This dummy series is to extend the chart from 0-5 for padding
data.addColumn('number', null);
data.addRows([
[{v: 1, f:'A'}, 1, 10, null],
[{v: 2, f:'B'}, 2, 5, null],
[{v: 3, f:'C'}, 4, 12, null],
[{v: 4, f:'D'}, 8, 5, null],
[{v: 5, f:''}, null, null, {v: 0, f:''}]
]);
options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
// Show a baseline at 0
baseline: 0,
// 6 Gridlines, 4 labels + left and right for padding
gridlines: {
count: 6
},
},
vAxis: {
baseline: 0,
},
series: [
{},
{},
// Hide our dummy series
{
lineWidth: 0,
pointsize: 0,
visibleInLegend: false
},
]
};
chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
chart1.draw(data, options);
}
Now it's looking more like what you want. There are two main issues. One is that if you mouseover the bottom right of the chart, a blank tooltip pops up (this is not a huge issue I'd hope, though you may have to do some error trapping if you make the chart interactive with events). The other is that the bottom of our chart is showing numbers, not letters.
Unfortunately, there is no easy way to format numbers as letters (at least until Google implements the entire ICU pattern set rather than just dates/numbers). So we need to make another workaround. Basically, what I do is create an entirely new chart just to make the labels. I then format it so that it hides everything but the labels, and make sure that it lines up horizontally with the chart above.
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
// This dummy series is to extend the chart from 0-5 for padding
data.addColumn('number', null);
data.addRows([
[{v: 1, f:'A'}, 1, 10, null],
[{v: 2, f:'B'}, 2, 5, null],
[{v: 3, f:'C'}, 4, 12, null],
[{v: 4, f:'D'}, 8, 5, null],
[{v: 5, f:''}, null, null, {v: 0, f:''}]
]);
options = {
curveType: 'function',
lineWidth: 2,
hAxis: {
// Show a baseline at 0
baseline: 0,
// 6 Gridlines, 4 labels + left and right for padding
gridlines: {
count: 6
},
// Hide our labels
textPosition: 'none'
},
vAxis: {
baseline: 0,
},
series: [
{},
{},
// Hide our dummy series
{
lineWidth: 0,
pointsize: 0,
visibleInLegend: false
},
]
};
// Add dummy data for the axis labels
var data2 = new google.visualization.DataTable();
data2.addColumn('string', 'x');
data2.addColumn('number', 'dummy');
data2.addRows([
['A', null],
['B', null],
['C', null],
['D', null]
]);
chart1 = new google.visualization.LineChart(document.getElementById('visualization'));
chart1.draw(data, options);
chart2 = new google.visualization.LineChart(document.getElementById('visualization2'));
chart2.draw(data2,
{
chartArea: {
top:0,
height:"0%"
},
min: 0,
max: 0,
hAxis: {
baselineColor: '#FFFFFF'
},
vAxis: {
baselineColor: '#FFFFFF',
direction: -1,
textPosition: 'none',
gridlines: {
color: '#FFFFFF'
}
}
});
}
Just make another below the first one, and use CSS to align it properly (float it around the same position, or whatnot), and it looks like the labels belong to the chart above.
It ain't glorious, but it works.
这篇关于Google Chart：如何绘制LineChart的纵轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
