Google visualization 谷歌可视化-带组合图的仪表板（气泡和线条）
我正在创建一个带有气泡图的仪表盘，用于比较今年和去年的考试成绩。x轴是2012年的平均百分位分数（从0到100），y轴是2013年的平均百分位分数（也从0到100）。我试图用这幅图来展示表现上的变化，因此，如果一所学校的学生在2012年考试中得分为第50百分位，在2013年考试中得分为第60百分位，那么这所学校将代表增长。类似地，如果一所学校的学生去年的平均成绩为第50百分位，但今年的平均成绩为第42百分位，那么该学校的学生人数将出现下降（相对于参照组）。泡沫的大小与学生人数成正比。y=x线描述了2013年百分位数分数与其2012年分数相匹配的学校，并代表了与去年相同的表现。因此，从视觉上看，中心在这条线上的泡沫显示增长，线下的泡沫显示下降，线下的泡沫显示停滞 如果我的用户看到y=x这条线[这是从（0,0）到（100100）的那条线]，那就容易多了。通过这种方式，他们可以很容易地看到线上方、上方或下方的气泡。如果这条线不在那里，那么除非他们知道要点，否则很难看到增长/下降 是否可以在气泡图上覆盖y=x线？如果是，怎么做？我试过做组合图，但没有成功。谢谢 以下是我尝试绘制组合图的方式：Google visualization 谷歌可视化-带组合图的仪表板（气泡和线条）,google-visualization,Google Visualization,我正在创建一个带有气泡图的仪表盘，用于比较今年和去年的考试成绩。x轴是2012年的平均百分位分数（从0到100），y轴是2013年的平均百分位分数（也从0到100）。我试图用这幅图来展示表现上的变化，因此，如果一所学校的学生在2012年考试中得分为第50百分位，在2013年考试中得分为第60百分位，那么这所学校将代表增长。类似地，如果一所学校的学生去年的平均成绩为第50百分位，但今年的平均成绩为第42百分位，那么该学校的学生人数将出现下降（相对于参照组）。泡沫的大小与学生人数成正比。y=x线描述
var table = new google.visualization.ChartWrapper({
chartType: 'ComboChart',
containerId: 'table_div',
options: {
height: 800,
width: 800,
bubble: {opacity: 0.2, stroke: 'transparent'},
hAxis: {minValue: 0, maxValue: 100},
vAxis: {minValue: 0, maxValue: 100},
colors: ['blue','red','green'],
seriesType: 'bubble',
series: {2: {type: 'line', pointSize: 0, lineWidth: 1, enableInteractivity: false, visibleInLegend: false}},
animation: {duration:1500, easing:'out'},
sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
}
});
[编辑：答案不适用于BubbleCharts，有关解决方法，请参阅下面的更新] 您可以添加具有两个数据点（0,0）和（100100）的第三个数据系列。然后设置系列。此系列的选项如下：
series: {
2: {
// options for the 3rd series
pointSize: 0, // makes the points in this series invisible
lineWidth: 1, // connects the points in this series with a line
enableInteractivity: false, // disables mouse effects (like spawning tooltips) for this series
visibleInLegend: false // hides this series from the legend
}
}
var table = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'table_div',
options: {
height: 800,
width: 800,
backgroundColor: 'transparent',
bubble: {opacity: 0.2, stroke: 'transparent'},
hAxis: {minValue: 0, maxValue: 100},
vAxis: {minValue: 0, maxValue: 100},
colors: ['blue','red','green'],
animation: {duration:1500, easing:'out'},
sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
}
});
var hackChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'hack_chart_div',
dataTable: [['x', 'y'],[0, 0], [100, 100]],
options: {
height: 800,
width: 800,
hAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
vAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
colors: ['blue'],
pointSize: 0,
lineWidth: 1,
enableInteractivity: false,
legend: {
position: 'none'
}
}
});
hackChart.draw();
<div id="chart_container">
<div id="table_div"></div>
<div id="hack_chart_div"></div>
</div>
查看此处的工作情况：[编辑：答案不适用于BubbleCharts，请参阅下面的更新了解解决方法] 您可以添加具有两个数据点（0,0）和（100100）的第三个数据系列。然后设置系列。此系列的选项如下：
series: {
2: {
// options for the 3rd series
pointSize: 0, // makes the points in this series invisible
lineWidth: 1, // connects the points in this series with a line
enableInteractivity: false, // disables mouse effects (like spawning tooltips) for this series
visibleInLegend: false // hides this series from the legend
}
}
var table = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'table_div',
options: {
height: 800,
width: 800,
backgroundColor: 'transparent',
bubble: {opacity: 0.2, stroke: 'transparent'},
hAxis: {minValue: 0, maxValue: 100},
vAxis: {minValue: 0, maxValue: 100},
colors: ['blue','red','green'],
animation: {duration:1500, easing:'out'},
sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
}
});
var hackChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'hack_chart_div',
dataTable: [['x', 'y'],[0, 0], [100, 100]],
options: {
height: 800,
width: 800,
hAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
vAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
colors: ['blue'],
pointSize: 0,
lineWidth: 1,
enableInteractivity: false,
legend: {
position: 'none'
}
}
});
hackChart.draw();
<div id="chart_container">
<div id="table_div"></div>
<div id="hack_chart_div"></div>
</div>
查看此处的工作情况：[编辑：答案不适用于BubbleCharts，请参阅下面的更新了解解决方法] 您可以添加具有两个数据点（0,0）和（100100）的第三个数据系列。然后设置系列。此系列的选项如下：
series: {
2: {
// options for the 3rd series
pointSize: 0, // makes the points in this series invisible
lineWidth: 1, // connects the points in this series with a line
enableInteractivity: false, // disables mouse effects (like spawning tooltips) for this series
visibleInLegend: false // hides this series from the legend
}
}
var table = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'table_div',
options: {
height: 800,
width: 800,
backgroundColor: 'transparent',
bubble: {opacity: 0.2, stroke: 'transparent'},
hAxis: {minValue: 0, maxValue: 100},
vAxis: {minValue: 0, maxValue: 100},
colors: ['blue','red','green'],
animation: {duration:1500, easing:'out'},
sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
}
});
var hackChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'hack_chart_div',
dataTable: [['x', 'y'],[0, 0], [100, 100]],
options: {
height: 800,
width: 800,
hAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
vAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
colors: ['blue'],
pointSize: 0,
lineWidth: 1,
enableInteractivity: false,
legend: {
position: 'none'
}
}
});
hackChart.draw();
<div id="chart_container">
<div id="table_div"></div>
<div id="hack_chart_div"></div>
</div>
查看此处的工作情况：[编辑：答案不适用于BubbleCharts，请参阅下面的更新了解解决方法] 您可以添加具有两个数据点（0,0）和（100100）的第三个数据系列。然后设置系列。此系列的选项如下：
series: {
2: {
// options for the 3rd series
pointSize: 0, // makes the points in this series invisible
lineWidth: 1, // connects the points in this series with a line
enableInteractivity: false, // disables mouse effects (like spawning tooltips) for this series
visibleInLegend: false // hides this series from the legend
}
}
var table = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'table_div',
options: {
height: 800,
width: 800,
backgroundColor: 'transparent',
bubble: {opacity: 0.2, stroke: 'transparent'},
hAxis: {minValue: 0, maxValue: 100},
vAxis: {minValue: 0, maxValue: 100},
colors: ['blue','red','green'],
animation: {duration:1500, easing:'out'},
sizeAxis: {minSize: 2, minValue: 5, maxSize: 30}
}
});
var hackChart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'hack_chart_div',
dataTable: [['x', 'y'],[0, 0], [100, 100]],
options: {
height: 800,
width: 800,
hAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
vAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
count: 0
},
baselineColor: 'none'
},
colors: ['blue'],
pointSize: 0,
lineWidth: 1,
enableInteractivity: false,
legend: {
position: 'none'
}
}
});
hackChart.draw();
<div id="chart_container">
<div id="table_div"></div>
<div id="hack_chart_div"></div>
</div>
看到它在这里工作：我对我的数据需要如何组织有点困惑。我的气泡图数据有5列，如中所述。那么，我应该在哪里添加（0,0）和（100100）数据点呢？另外，我编辑了我的问题，以包括我如何尝试调用组合图。关于我做错了什么的想法？这是我的[数据源]（）。哎呀，我错了，我脑子里不知怎么想，你用的是散点图，而不是泡泡图。没有办法在BubbleCharts中添加一行。您可以尝试绘制具有相同尺寸的第二个图表，并删除所有其他图表元素，其中有一条从（0，0）到（100，100）的线，通过CSS将BubbleChart分层到其他图表的顶部，并将BubbleChart的backgroundColor选项设置为“透明”。我会用一个例子更新我的答案。很好的解决方法…谢谢！我想到的另一个想法是在气泡图上以0到100之间的每个整数制作一系列小的黑色气泡…所以（0,0）（1,1）（2,2）…（99,99）（100100）。不会有一条连续的线，但它会产生这种效果。不过，我更喜欢你的变通方法！对于我的数据需要如何组织，我有点困惑。我的气泡图数据有5列，如中所述。那么，我应该在哪里添加（0,0）和（100100）数据点呢？另外，我编辑了我的问题，以包括我如何尝试调用组合图。关于我做错了什么的想法？这是我的[数据源]（）。哎呀，我错了，我不知怎么把它弄进来了