我试图通过添加' $'来格式化条形图的垂直轴。符号到vaxis文本,但它不起作用。
然而,横向轴的形成工作正常!!!!!
尝试下面的代码,您可以看到垂直轴值以美元($)符号
为后缀这是我用来绘制面积图的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
vAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is not working
tooltip: {trigger: 'none'},
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="barchart_values" ></div>
</body>
</html>
答案 0 :(得分:0)
尝试以下代码,
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
vAxis: {gridlines:{color: 'transparent'}, textPosition: 'out'},
tooltip: {trigger: 'none'}
};
var formatter = new google.visualization.NumberFormat({ pattern: '$#' });
formatter.format(data, 1);
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
答案 1 :(得分:0)
不,那不行,但我找到了解决方案。
这是我的解决方案,我在这里画一个星形图标而不是'$'符号
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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", "Density", { role: "style" } ],
["5", 888, "color: rgb(159,192,90)"],
["4", 55, "color: rgb(173,214,51)"],
["3", 6, "color: rgb(255,216,52)"],
["2", 2, "color: rgb(255,178,52)"],
["1", 1, "color: rgb(255,139,90)"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Cumulative Rating",
width: 400,
height: 200,
bar: {groupWidth: "95%"},
legend: { position: "none" },
hAxis: {gridlines:{color: 'transparent'}, textPosition: 'out', format : '$#'}, // This is working fine
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
draw_stars();
}
function draw_stars()
{
var iteration = 0;
var val1,val2;
$('#barchart_values').each(function(index){
$("text").each(function(index){
//alert($(this).value);
if($(this).is("[text-anchor]") && $(this).is("[y]") && $(this).is("[x]") && $(this).attr("text-anchor") == 'end')
{
if(iteration == 0)
{
val1 = $(this).attr('x');
//alert($(this).text());
$(this).text("\u2605 " + $(this).text());
}
else
{
val2 = $(this).attr('x');
}
if(val1 == val2)
{
//alert($(this).text());
$(this).text("\u2605 " + $(this).text());
}
iteration = iteration + 1;
}
});
});
}
</script>
</head>
<body>
<div id="barchart_values" ></div>
</body>
</html>