如何为 Google Charts 中的特定列添加颜色

IT技术 javascript charts google-visualization
2021-03-05 02:39:12

我有一个包含 4 条不同颜色线条的图表。使用复选框我可以隐藏/显示特定的行。现在,当显示所有行(选中所有框)时,第 1 行是红色,第 2 行是黄色。当第 1 行隐藏时,第 2 行是红色,第 3 行是黄色。

这可能会让用户感到困惑,所以我希望将这些行分配给特定的列。有办法吗?

我目前为线条分配颜色,如下所示:

    colors: [red, yellow, green, blue]

这张图可能会让事情更清楚。

当显示所有行时:

图片

当第 1 行被隐藏时:

图像2

我希望我的问题很清楚。

编辑:我还尝试在options.series如下所示分配颜色,但结果相同

series: {
            0: { color: '#e2431e' ,targetAxisIndex: 0},
            1: { color: '#e7711b' ,targetAxisIndex: 1},
            2: { color: '#f1ca3a' ,targetAxisIndex: 0},
            3: { color: '#6f9654' ,targetAxisIndex: 0},       
1个回答

您可以将颜色指定为数据表上的列属性

然后根据可见列构建颜色数组

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Q1');
  data.addColumn('number', 'Q2');
  data.addColumn('number', 'Q3');
  data.addColumn('number', 'Q4');

  data.addRow(['January 2016', 500, 100, 1200, 1000]);
  data.addRow(['February 2016', 500, 100, 1975, 1000]);
  data.addRow(['March 2016', 500, 100, 1200, 1000]);
  data.addRow(['April 2016', 500, 100, 1200, 1000]);

  var colors = ['red', 'yellow', 'green', 'blue'];
  colors.forEach(function (color, index) {
    data.setColumnProperty(index + 1, 'color', color);
  });

  var options = {
    chartArea: {
      top: 12,
      right: 0,
      bottom: 72,
      left: 72
    },
    legend: {
      position: 'bottom'
    },
    colors: colors,
    hAxis: {
      slantedText: true
    },
    vAxis: {
      title: 'Amount',
      viewWindow: {
        max: 2000
      }
    },
    bar: {
      groupWidth: '90%'
    },
    height: 400
  };

  $('.series-chk').on('change', drawChart);
  $(window).resize(drawChart);
  drawChart();

  function drawChart() {
    var chartColors = [];
    var chartColumns = [0];
    var view = new google.visualization.DataView(data);

    $.each($('.series-chk'), function (index, checkbox) {
      var seriesColumn = parseInt(checkbox.value);
      if (checkbox.checked) {
        chartColumns.push(seriesColumn);
        chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
      }
    });
    view.setColumns(chartColumns);
    options.colors = chartColors;
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(view, options);
  }
}
<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>
<input class="series-chk" id="chk-0" type="checkbox" value="1" checked /><label for="chk-0">Series 0</label>
<input class="series-chk" id="chk-1" type="checkbox" value="2" checked /><label for="chk-1">Series 1</label>
<input class="series-chk" id="chk-2" type="checkbox" value="3" checked /><label for="chk-2">Series 2</label>
<input class="series-chk" id="chk-3" type="checkbox" value="4" checked /><label for="chk-3">Series 3</label>
<div id="chart_div"></div>

好的,第二个问题是 DataTable 和 DataView 相同还是我可以将 DataTable 用于这两个功能?
2021-04-25 02:39:12
谢谢!不完全是我正在寻找的,但我认为这可能是唯一的方法。
2021-05-09 02:39:12
@WhiteHat 是否有必要两次使用名为 drawChart() 的函数?
2021-05-12 02:39:12
不一样,DataView 仅用于显示选定的列——但 DataView 可以同时用于...
2021-05-14 02:39:12