Question

我试图通过添加＆＃39; $＆＃39;来格式化条形图的垂直轴。符号到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>

Answer 1

尝试以下代码，

<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>

Answer 2

不，那不行，但我找到了解决方案。

这是我的解决方案，我在这里画一个星形图标而不是'$'符号

<!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>

谷歌可视化条形图格式化垂直轴（vAxis）无法正常工作

2 个答案: