Question

我正在尝试创建一个包含某种组的条形图。每列都是不同的东西，但它们中的一些属于同一组，我希望它们按行或类别分组。另外，我希望能够为不同的值设置不同的颜色。高数字会有绿色条形，低数字会显示红色。

然后，我想在折线图中有垂直网格线，如图所示。

我试过了vAxis: { gridlines: { count: 10 } }，但它没有用。我得到的只是水平网格线。

关于如何做的任何想法？或者还有其他图表库可以做到吗？谢谢。

Answer 1

vAxis.gridlines显示为水平行，

帮助确定y轴标签的放置位置

要获取垂直行，需要使用hAxis.gridlines

但是，只有continuous axis

支持hAxis.gridlines

换句话说，第一列或x轴的数据类型，
必须是'date'，'number'等...... - 不是'string'

默认情况下，更改x轴的数据类型将显示hAxis.gridlines 但是如果需要你可以修改......

对于颜色范围，您可以使用'style' column来控制颜色

请参阅以下工作代码段，使用'style'

添加DataView列

根据使用的颜色数量动态构建颜色范围，
以及每个系列列的值范围

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['X', 'A', 'B', 'C'],
      [1, 3, 7, 3],
      [2, 1, 3, 5],
      [3, 5, 8, 2],
      [4, 4, 8, 4]
    ]);
    var view = new google.visualization.DataView(data);
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    var table = new google.visualization.Table(document.getElementById('table_div'));
    var options = {
      legend: {
        position: 'none'
      }
    };
    var colors = ['red', 'orange', 'yellow', 'green'];

    buildChart();
    window.addEventListener('resize', drawChart, false);

    function drawChart() {
      chart.draw(view, options);
      table.draw(view);
    }

    function buildChart() {
      var dataRange = [];
      var viewColumns = [0];
      $.each(new Array(data.getNumberOfColumns()), function (index) {
        if (index === 0) {
          return;
        }
        dataRange.push(data.getColumnRange(index));
        viewColumns.push(index);
        viewColumns.push({
          calc: function (dt, row) {
            var minValue = getRangeValue(0);
            var maxValue = getRangeValue(1);
            var groupValue = (maxValue - minValue) / colors.length;
            for (var i = 0; i < colors.length; i++) {
              if (dt.getValue(row, index) <= ((groupValue * (i + 1)) + minValue)) {
                return colors[i];
              }
            }
          },
          type: 'string',
          role: 'style'
        });
      });
      view.setColumns(viewColumns);

      function getRangeValue(index) {
        var rangeValue = null;
        dataRange.forEach(function (range) {
          if (index) {
            rangeValue = rangeValue || range.max;
            rangeValue = Math.max(rangeValue, range.max);
          } else {
            rangeValue = rangeValue || range.min;
            rangeValue = Math.min(rangeValue, range.min);
          }
        });
        return rangeValue;
      }

      drawChart();
    }
  },
  packages:['corechart', 'table']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>

Google图表网格线，颜色

1 个答案: