Question

我有一个折线图，沿着下面的线，我希望能够设置哪个标签在顶部。（在该示例中，希望“狗”位于顶部。）

我意识到我可以手动执行此操作-仅通过切换列的顺序即可-但实际上，我正在处理大型数据集，因此更希望能够简单地指定标签在标签上的显示顺序轴，而无需重新排列列本身。

有没有办法做到这一点？我在文档中找不到它。

代码示例：https://www.w3schools.com/code/tryit.asp?filename=G2W868VK63KD

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X','dogs', 'cats'],
              [0, 1, 9],
              [1, 2, 7],
              [2, 3, 6],
              [3, 3, 9],
        ]);

        var options = {
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };

        var chart = new google.visualization.LineChart(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

没有可用于设置订单的配置选项。
但是您可以使用数据视图来更改列的顺序。

DataView类具有用于setColumns的方法，
它需要一个列索引数组。

view.setColumns([0, 2, 1, 4, 3]);

这可以通过使用数组指定顺序来动态完成。

请参阅以下工作片段，
在这里，columnOrder数组用于指定列的顺序...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['X', 'cats', 'dogs', 'birds', 'reptiles', 'fish', 'rodents'],
    [0, 1, 9, 5, 8, 3, 2],
    [1, 2, 7, 3, 9, 4, 3],
    [2, 3, 6, 2, 10, 5, 4],
    [3, 3, 9, 5, 11, 6, 5],
  ]);

  // specify order
  var columnOrder = [
    'dogs',
    'birds',
    'cats',
    'fish',
    'rodents',
    'reptiles',
  ];

  // build data view columns
  var viewColumns = [0];
  columnOrder.forEach(function (label) {
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnLabel(i) === label) {
        viewColumns.push(i);
      }
    }
  });

  // build data view
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var options = {
    height: 400,
    series: {
      0: { color: '#e2431e' },
      1: { color: '#e7711b' },
      2: { color: '#f1ca3a' },
      3: { color: '#6f9654' },
      4: { color: '#1c91c0' },
      5: { color: '#43459d' },
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view, options);  // use view to draw chart
});

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

更改Google折线图中的数据标签顺序

1 个答案: