我试图添加一条垂直线,以便在元素超出值时可以有视觉区别。
由于
<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>
答案 0 :(得分:5)
以下示例演示了如何绘制其他垂直线
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>
答案 1 :(得分:1)
也许这个?
在选项ticks:
中插入并输入所需的值(例如本例中的1,3,5,7)
hAxis: {
title: 'My Values',
ticks: [1,3,5,7],
minValue: 0
}