Google Chart：如何绘制条形图的垂直线 [英] Google Chart: How to draw the vertical line for bar graph
本文介绍了Google Chart：如何绘制条形图的垂直线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谢谢
$ b我想添加一条垂直线，以便在视觉上区分元素何时超过该值。$ b
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（visualization，1，{
packages：[corechart]
}）;
google.setOnLoadCallback（drawChart）;
$ b函数drawChart（）{
var data = google.visualization.arrayToDataTable（[
[Element，Difference，{
role：style
}]，
[FOLDERADDDDDATE，2.29，＃e5e6e2]，
[NOTEUPDATE，3.63，silver]，
[DELETENOTE，1.12 ，e5e4e7]，
[NOTEUPDATEANDFOLDER，5.02，color：＃e5e4e2]，
[FOLDERREMOVEUPDATE，。082，color：e5e5e2]，
[ PENDINGEVENT，0，color：e5e4e4]
]）;
var view = new google.visualization.DataView（data）;
view.setColumns（[0，1，{
calc：stringify，
sourceColumn：1，
type：string，
role：annotation
}，
2]）;
var options = {
title：，
width：600，
height：300，
bar：{
groupWidth： 95％
}，
图例：{
位置：无
}，
};
var chart = new google.visualization.BarChart（document.getElementById（barchart_values））;
chart.draw（view，options）;
}
< / script>
解决方案
以下示例演示如何绘制额外的垂直线
google.load（'visualization'，'1'，{packages：['corechart']}）; google.setOnLoadCallback（drawChart）;函数drawChart（）{var data = google.visualization.arrayToDataTable（[[Element，Difference，{role：style}]，[FOLDERADDUPDATE，2.29，＃e5e6e2]，[NOTEUPDATE ，3.63，silver]，[DELETENOTE，1.12，e5e4e7]，[NOTEUPDATEANDFOLDER，5.02，color：＃e5e4e2]，[FOLDERREMOVEUPDATE，。082，color：e5e5e2]， [PENDINGEVENT，0，color：e5e4e4]]）; var view = new google.visualization.DataView（data）; view.setColumns（[0，1，{calc：stringify，sourceColumn：1，type：string，role：annotation}，2]）; var options = {title：，width：600，height：300，bar：{groupWidth：95％}，legend：{position：none}}; var chart = new google.visualization.BarChart（document.getElementById（barchart_values））; chart.draw（view，options）; drawVAxisLine（图表，3.0）; //设置x值的位置}函数drawVAxisLine（chart，value）{var layout = chart.getChartLayoutInterface（）; var chartArea = layout.getChartAreaBoundingBox（）; var svg = chart.getContainer（）。getElementsByTagName（'svg'）[0]; var xLoc = layout.getXLocation（value）svg.appendChild（createLine（xLoc，chartArea.top + chartArea.height，xLoc，chartArea.top，'＃00cccc'，4））; //轴线}函数createLine（x1，y1，x2，y2，color，w）{var line = document.createElementNS（'http://www.w3.org/2000/svg'，'line'）; line.setAttribute（'x1'，x1）; line.setAttribute（'y1'，y1）; line.setAttribute（'x2'，x2）; line.setAttribute（'y2'，y2）; line.setAttribute（'stroke'，color）; line.setAttribute（'stroke-width'，w）; return line;}
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script>< div id =barchart_values>< / div>
I'm trying to add a vertical line so that there can be a visual distinction for when an element exceeds the value.
Thanks
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Difference", {
role: "style"
}],
["FOLDERADDUPDATE", 2.29, "#e5e6e2"],
["NOTEUPDATE", 3.63, "silver"],
["DELETENOTE", 1.12, "e5e4e7"],
["NOTEUPDATEANDFOLDER", 5.02, "color: #e5e4e2"],
["FOLDERREMOVEUPDATE",.082,"color:e5e5e2"],
["PENDINGEVENT", 0,"color:e5e4e4"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options = {
title: "",
width: 600,
height: 300,
bar: {
groupWidth: "95%"
},
legend: {
position: "none"
},
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
解决方案
The following example demonstrates how to draw an additional vertical line
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Difference", {
role: "style"
}],
["FOLDERADDUPDATE", 2.29, "#e5e6e2"],
["NOTEUPDATE", 3.63, "silver"],
["DELETENOTE", 1.12, "e5e4e7"],
["NOTEUPDATEANDFOLDER", 5.02, "color: #e5e4e2"],
["FOLDERREMOVEUPDATE",.082,"color:e5e5e2"],
["PENDINGEVENT", 0,"color:e5e4e4"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options = {
title: "",
width: 600,
height: 300,
bar: {
groupWidth: "95%"
},
legend: {
position: "none"
}
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
drawVAxisLine(chart, 3.0); //set x value where line shoud be located
}
function drawVAxisLine(chart,value){
var layout = chart.getChartLayoutInterface();
var chartArea = layout.getChartAreaBoundingBox();
var svg = chart.getContainer().getElementsByTagName('svg')[0];
var xLoc = layout.getXLocation(value)
svg.appendChild(createLine(xLoc,chartArea.top + chartArea.height,xLoc,chartArea.top,'#00cccc',4)); // axis line
}
function createLine(x1, y1, x2, y2, color, w) {
var line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', x1);
line.setAttribute('y1', y1);
line.setAttribute('x2', x2);
line.setAttribute('y2', y2);
line.setAttribute('stroke', color);
line.setAttribute('stroke-width', w);
return line;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="barchart_values"></div>
这篇关于Google Chart：如何绘制条形图的垂直线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
