一行Google Graph中的多值 [英] Multi Value in one line Google Graph
问题描述
我想在谷歌线图中生成相同的图片，但我不能这样做。我有A，B和C这些字母中的每一个都有一些值（A1，A2，B1，B2 ... eg）日期是相同的，它只有时间（分钟或秒，但日期相似）不同，我只能生成一个在一个日期点一个字母：
[cols] =>数组
（
[0] =>数组
（
[id] =>
[label] =>时间戳
[类型] =>字串
）
[1] =>数组
（
[id] =>
[label] => A
[type] => number
）
[2] =>数组
（
[id] =>
b
$ b $ =>
[标签] => C
[类型] =>编号
）
）
[rows] =>数组
（
[0] =>数组
（
[c] =>数组
（
[0] =>数组
（
[v] => 2014-01-30
）
[1] =>数组
（
[v ] => 120
）
[2] =>数组
（
[v] => 100
）
[3] =>数组
（
[v] => 35
）
）
）
[1] =>数组
（
[c] =>数组
（
[0] => Array
（
[v] => 2014-01-30
）
[1] =>数组
（
[v] => 334
）
[2] =>数组
（
[v] => 55
）
[3] =>数组
（
[v] => 15
）
）
）
）
这些代码给我3条独立的行，在一个日期（2014-01-30）中只有3个值，下一个日期也是相同（2014-01-30）但我想收集所有这些数据在一行中，我在下面的照片中提到。感谢所有人！
做这项工作需要一点技巧。您需要像这样组织数据：
Date |类型|值|标签
---------------------------------
30.01.2014 | A | 75 | A1
30.01.2014 | A | 100 | A2
30.01.2014 | A | 125 | A3
30.01.2014 | B | 150 | B1
30.01.2014 | B | 175 | B2
30.01.2014 | B | 200 | B3
30.01.2014 | C | 180 | C1
30.01.2014 | C | 210 | C2
30.01.2014 | C | 270 | C3
31.01.2014 | A | 75 | A1
31.01.2014 | A | 100 | A2
31.01.2014 | A | 125 | A3
31.01.2014 | B | 150 | B1
31.01.2014 | B | 175 | B2
31.01.2014 | B | 200 | B3
31.01.2014 | C | 180 | C1
31.01.2014 | C | 210 | C2
31.01.2014 | C | 270 | C3
数据需要按您想绘制线条的顺序排序（所以如果您想要在2014年1月30日行的顺序是A1，A2，A3，B1，B2，B3，那就是它必须在表格中的顺序）。
接下来，您需要使用DataView将其拆分为多个数据序列，以便像您的图例那样对点进行颜色编码：
var view = new google.visualization.DataView（data）;
view.setColumns（[0，{
type：'number'，
label：'A'，
calc：function（dt，row）{
return （dt.getValue（row，1）=='A'）？dt.getValue（row，2）：null;
}
}，{
type：'string'，
role：'annotation'，
calc：function（dt，row）{
return（dt.getValue（row，1）=='A'）？dt.getValue（row，3 ）：null;
}
}，{
type：'number'，
label：'A'，
calc：function（dt，row）{
return（dt.getValue（row，1）=='B'）？dt.getValue（row，2）：null;
}
}，{
type：' string'，
role：'annotation'，
calc：function（dt，row）{
return（dt.getValue（row，1）=='B'）？dt.getValue （row，3）：null;
}
}，{
type：'number'，
label：'A'，
calc：function（dt， row）{
return（dt.getValue（row，1）=='C'）？dt.getValue（row，2）：null;
}
} {
type：'string'，
role：'annotation'，
calc：function（dt，row）{
return（dt.getValue （row，1）=='C'）？ dt.getValue（row，3）：null;
}
}，2]）;
然后，在绘制图表时，设置系列 b
$ b
系列：{
0：{
//系列A选项
pointSize：3，
lineWidth：0
//如果您想要
}，$ b $，您可以使用color选项设置颜色b 1：{
// B系列选项
pointSize：3，
lineWidth：0
//如果您希望$可以使用color选项设置颜色b $ b}，
2：{
// C系列选项
pointSize：3，
lineWidth：0
//您可以使用如果你想
，
3：{
//这个系列画线
pointSize：0，
lineWidth：1，
visibleInLegend：false，
enableInteractivity：false
//你可以在这里用colo如果你想要
code
$ b 请看这里的一个例子： http://jsfiddle.net/asgallant/bn9tE/
I want to generate in google line graph the same in the picture but I cannot to do it. I have A,B and C each of these letters have some values ( A1, A2, B1, B2 ... e.g ) The date is the same it differs only time ( minutes or seconds but day is similar ) I could generate only one point for one letter in one date:
[cols] => Array
(
[0] => Array
(
[id] =>
[label] => Timestamp
[type] => string
)
[1] => Array
(
[id] =>
[label] => A
[type] => number
)
[2] => Array
(
[id] =>
[label] => B
[type] => number
)
[3] => Array
(
[id] =>
[label] => C
[type] => number
)
)
[rows] => Array
(
[0] => Array
(
[c] => Array
(
[0] => Array
(
[v] => 2014-01-30
)
[1] => Array
(
[v] => 120
)
[2] => Array
(
[v] => 100
)
[3] => Array
(
[v] => 35
)
)
)
[1] => Array
(
[c] => Array
(
[0] => Array
(
[v] => 2014-01-30
)
[1] => Array
(
[v] => 334
)
[2] => Array
(
[v] => 55
)
[3] => Array
(
[v] => 15
)
)
)
)
These code gives me 3 seperate lines with only 3 values in one date ( 2014-01-30 ) and next date is also the same ( 2014-01-30 ) But I want to collect all these data in one line as I mentioned in photo below. Thanks in advance for everybody!
解决方案 Making this work is going to require a bit of trickery. You need to organize your data like this:
Date | Type | Value | Label
---------------------------------
30.01.2014 | A | 75 | A1
30.01.2014 | A | 100 | A2
30.01.2014 | A | 125 | A3
30.01.2014 | B | 150 | B1
30.01.2014 | B | 175 | B2
30.01.2014 | B | 200 | B3
30.01.2014 | C | 180 | C1
30.01.2014 | C | 210 | C2
30.01.2014 | C | 270 | C3
31.01.2014 | A | 75 | A1
31.01.2014 | A | 100 | A2
31.01.2014 | A | 125 | A3
31.01.2014 | B | 150 | B1
31.01.2014 | B | 175 | B2
31.01.2014 | B | 200 | B3
31.01.2014 | C | 180 | C1
31.01.2014 | C | 210 | C2
31.01.2014 | C | 270 | C3
The data needs to be ordered in the order you want the line drawn (so if you want the line to be in the order A1, A2, A3, B1, B2, B3 on 30.01.2014, then that is the order it must be in the table).
Next, you need to use a DataView to split this into multiple series of data to get the points color-coded like your legend:
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'A',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 2) : null;
}
}, {
type: 'string',
role: 'annotation',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'A') ? dt.getValue(row, 3) : null;
}
}, {
type: 'number',
label: 'A',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 2) : null;
}
}, {
type: 'string',
role: 'annotation',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'B') ? dt.getValue(row, 3) : null;
}
}, {
type: 'number',
label: 'A',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 2) : null;
}
}, {
type: 'string',
role: 'annotation',
calc: function (dt, row) {
return (dt.getValue(row, 1) == 'C') ? dt.getValue(row, 3) : null;
}
}, 2]);
Then, when drawing the chart, set the series option to make the points and line appear correctly:
series: {
0: {
// series A options
pointSize: 3,
lineWidth: 0
// you can set the color here with the "color" option if you want
},
1: {
// series B options
pointSize: 3,
lineWidth: 0
// you can set the color here with the "color" option if you want
},
2: {
// series C options
pointSize: 3,
lineWidth: 0
// you can set the color here with the "color" option if you want
},
3: {
// this series draws the line
pointSize: 0,
lineWidth: 1,
visibleInLegend: false,
enableInteractivity: false
// you can set the color here with the "color" option if you want
}
}
See an example here: http://jsfiddle.net/asgallant/bn9tE/
这篇关于一行Google Graph中的多值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
