Question

我的应用程序中的颜色没有变化。我必须制作柱形图，但x轴上的每个标签上的颜色都没有变化。

<html>
  <head>
    <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([
          ['Year', 'Sales'],
          ['2004',  1000],
          ['2005',  1170],
          ['2006',  660 ],
          ['2007',  1030]
        ]);

        var options = {
          colors:['#A2C180','#3D7930','#FFC6A5','#FFFF42','#DEF3BD','#00A5C6','#DEBDDE','#000000'],
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

或任何人告诉我如何在给定代码上添加或显示x轴标签....

<html>
  <head>
    <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 = new google.visualization.DataTable();
    var raw_data = [
    ["January", parseFloat('120')],
    ["Februry", parseFloat('150')],
    ["March", parseFloat('50')],
    ["April", parseFloat('90')],
    ["May", parseFloat('100')],
    ["June", parseFloat('130')]
    ];
  var years = [' '];

    data.addColumn('string', 'sales');
    for (var i = 0; i  < raw_data.length; ++i) {
        data.addColumn('number', raw_data[i][0]);
    }

    data.addRows(years.length);

    for (var j = 0; j < years.length; ++j) {
        data.setValue(j, 0, years[j].toString());
    }
    for (var i = 0; i  < raw_data.length; ++i) {
        for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);
        }
    }
        var options = {
          colors:['#A2C180','#3D7930','#FFC6A5','#FFFF42','#DEF3BD','#00A5C6','#DEBDDE','#000000'],
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Answer 1

使用Google的图表，它会将您拥有的数据视为仅包含4个值的一系列数据，而不是单独的数据位，并且实际上不可能将颜色应用于系列中的每个条形。

有很多方法可以达到你想要的效果，如question/answer中所示，但不幸的是，没有任何东西可以满足你的期望。

柱形图中的颜色没有变化

1 个答案: