Changing the order of data labels in Google Line C

I have a line chart, along the lines of the below, and I want to be able to set which label is on top. (In the example, would want "dogs" to be on top.)

I realize I could do this manually -- just by switching the order of the columns -- but in practice I am dealing with large datasets and would much prefer to simply be able to specify the order in which the labels should appear on the axis without rearranging the columns themselves.

Is there any way to do that? I could not find it in the documentation.

Code example: 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>

there are no config options available for setting the order.
but you could use a data view to change the order of the columns.

the DataView class has a method for setColumns,
which takes an array of column indexes.

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

this could be done dynamically, by using an array to specify the order.

see following working snippet,
here, the columnOrder array is used to specify the order of the columns...

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>

Changing the order of data labels in Google Line C

问题:

回答1:

收藏的人(0)

Changing the order of data labels in Google Line C

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮