Question

我使用Google Stack Chart生成报告。样本Fiddle。

这里的问题是我需要图表中每个系列的分隔线我尝试了以下代码：

var dataView = new google.visualization.DataView(data);

dataView.setColumns([0,1,2, {"type": "string","role": "style","calc": ReturnStroke}, 3, {
                "type": "string",
                "role": "style",
                "calc": ReturnStroke
            }, 4, {
                "type": "string",
                "role": "style",
                "calc": ReturnStroke
            }, 5, {
                "type": "string",
                "role": "style",
                "calc": ReturnStroke
            },6,7
            ]);

function ReturnStroke(dataTable, rowNum) {
                return 'stroke-color: #99ebff;';
 }

chart.draw(dataView, options);

这对我有用。但问题是，它是在条形图的四边绘制边框线，但我只需要在顶部。这也只是我提供的示例数据。实际上我的图表中有大约500列。如上所述，手动指定它们是不切实际的。

是否有任何简单的方法可以在图表级别全局指定分隔线。

Answer 1

不确定如何改变四边的笔划，
但您可以动态构建视图列

然而，颜色和笔划的样式需要组合成一个样式列
将上面张贴的代码添加到小提琴中，
笔触样式会覆盖数据表中设置的颜色样式

这是一个如何动态构建视图列的示例...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Machine', '', '', '', '', ''],
    [0.5, null, null, null, null, 0.067],
    [1, 0.05, 0.0775, 0.069, 0.05, 0.067],
    [2, 0.05, 0.0775, 0.069, 0.05, 0.067],
    [2.5, null, null, null, null, 0.067]
  ]);

  var min = data.getColumnRange(0).min;
  var max = data.getColumnRange(0).max;

  var options = {
    width: 500,
    height: 500,
    legend: {
      position: 'none',
      maxLines: 6,
      textStyle: {
        color: 'black',
        fontSize: 10
      }
    },
    isStacked: true,
    seriesType: 'bars',
    series: {
      4: {
        type: "line",
        color: '#FF0000',
        visibleInLegend: false
      }

    },
    vAxis: {
      baseline: 0,
    },
    hAxis: {
      ticks: [{
        "v": 1,
        "f": "M1"
      }, {
        "v": 2,
        "f": "M2"
      }],

      viewWindow: {
        min: min,
        max: max
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

  var dataView = new google.visualization.DataView(data);

  var colors = {
    '1': ['#808080', '#C71585', '#FFC0CB', 'Blue'],
    '2': ['Yellow', 'Pink', '#808080', 'Green']
  };

  var viewColumns = [];
  for (var col = 0; col < data.getNumberOfColumns(); col++) {
    addColumn(col);
  }
  function addColumn(col) {
    viewColumns.push(col);
    if (col > 0) {
      viewColumns.push({
        type: 'string',
        role: 'style',
        calc: function (dt, row) {
          var style = null;
          if ((row > 0) && (row < dt.getNumberOfRows() - 1)) {
            style = 'fill-color: ' + colors[dt.getFormattedValue(row, 0)][col - 1] + ';';
            if ((col > 1) && (col < dt.getNumberOfColumns() - 2)) {
              style += ' stroke-color: #99ebff;';
            }
          }
          return style;
        }
      });
    }
  }
  dataView.setColumns(viewColumns);

  chart.draw(dataView, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

堆积图表（Google Charts）中每个系列之间的分隔线

1 个答案: