Question

有没有办法删除x轴的默认排序？它会自动从A-Z中排序，但我希望在1月到12月之间进行排序图表图片：

Chart Image

对于每年缺少的月份和产品类型，我已经在PHP中自动生成它们（我的最终代码是）。所以它看起来像：

[＆＃34; 1＆＃34;，0，＆＃34; Apitong＆＃34;＆＃34; 2018＆＃34;＆＃34;模拟＆＃34;]，[＆＃34; 1月＆＃ 34;，0，＆＃34; Apitong＆＃34;＆＃34; 2018＆＃34;＆＃34;数字＆＃34;]，[＆＃34; 1＆＃34;，0，＆＃34; Apitong＆＃34;＆＃34; 2018＆＃34;＆＃34;因特网＆＃34;]，[＆＃34;二月＆＃34; 0，＆＃34; Apitong＆＃34;＆＃34; 2018＆＃ 34;，＆＃34;模拟＆＃34;]，[＆＃34;二月＆＃34;，0，＆＃34; Apitong＆＃34;＆＃34; 2018＆＃34;＆＃34;数字＆＃34 ;]，......等

我的示例代码：JSFiddle

google.charts.load('current', {
 callback: function() {
var data = google.visualization.arrayToDataTable([
  ['Month', 'Amount', 'Area', 'Year', 'Product Type'],
  ['January', 3300, 'Apitong', 2015, 'Analog'],
  ['February', 1000, 'Apitong', 2015, 'Analog'],
  ['March', 2000, 'Apitong', 2015, 'Analog'],
]);

google.visualization.events.addListener(product, 'ready', drawChart);

function drawChart() {
  var areaData = new google.visualization.DataView(area.getDataTable());
  var filters = [{
      column: 2,
      value: area.getState().selectedValues[0]
    }
  ];

  // group by 'Group' / 'Year'
  var dataGroup = google.visualization.data.group(
    areaData, [0, 3], [{
      column: 1,
      aggregation: google.visualization.data.sum,
      type: 'number',
      label: 'Sum'
    }, {
      column: 1,
      aggregation: google.visualization.data.count,
      type: 'number',
      label: 'Count'
    }]
  );
  dataGroup.sort([{
    column: 0
  }, {
    column: 1
  }]);

  var ColumnChart = new google.visualization.ChartWrapper({
    'chartType': 'ColumnChart',
    'containerId': 'productssold_chart_div',
    'dataTable': view
  });
  ColumnChart.draw();
}
},
   packages: ['controls', 'corechart']
});

Answer 1

使用Discrete轴（'string'值）时，
轴将按数据表中行的顺序排序在这种情况下，作为使用静态方法的结果，行被设置为字母 - ＆gt; data.group

要更正此问题，系统会使用月份名称数组来构建自定义排序顺序将新列添加到finalData，并将数组中的索引用作订单

  // build final data table
  var monthOrder = [
    'January', 'February', 'March',
    'April', 'May', 'June',
    'July', 'August', 'September',
    'October', 'November', 'December'
  ];

  var finalData = new google.visualization.DataTable({
    cols: [{
      label: 'Group',
      type: 'string'
    }, {
      label: 'Amount',
      type: 'number'
    }, {
      label: 'Count',
      type: 'number'
    }, {
      label: 'Sort',
      type: 'number'
    }]
  });

  // add row for each month AMOUNT | COUNT
  var rowMonth = null;
  var rowIndex = null;
  for (var i = 0; i < dataGroup.getNumberOfRows(); i++) {
    if (rowMonth !== dataGroup.getValue(i, 0)) {
      rowMonth = dataGroup.getValue(i, 0);
      rowIndex = finalData.addRow();
      finalData.setValue(rowIndex, 0, rowMonth);
    }
    for (var x = 1; x < finalData.getNumberOfColumns(); x++) {
      switch (finalData.getColumnLabel(x)) {
        case 'Amount':
          finalData.setValue(rowIndex, x, dataGroup.getValue(i, 2).toString());
          break;

        case 'Count':
          finalData.setValue(rowIndex, x, dataGroup.getValue(i, 3).toString());
          break;

        case 'Sort':
          finalData.setValue(rowIndex, x, monthOrder.indexOf(rowMonth));
          break;
      }
    }
  }
  finalData.sort([{column: 3}]);

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: function() {
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Amount', 'Area', 'Year', 'Product Type'],
      ['February', 1000, 'Apitong', 2015, 'Analog'],
      ['February', 1700, 'Apitong', 2015, 'Internet'],
      ['February', 1200, 'Avenida Veteranos', 2015, 'Digital'],
      ['February', 2800, 'Brgy. Baras', 2015, 'Internet'],
      ['February', 2150, 'Avenida Veteranos', 2018, 'Digital'],
      ['February', 2700, 'Apitong', 2018, 'Internet'],
      ['February', 2500, 'Brgy. Baras', 2018, 'Internet'],
      ['March', 2000, 'Apitong', 2015, 'Digital'],
      ['March', 2400, 'Avenida Veteranos', 2015, 'Digital'],
      ['March', 1600, 'Brgy. Baras', 2015, 'Internet'],
      ['March', 3000, 'Avenida Veteranos', 2018, 'Analog'],
      ['March', 1400, 'Apitong', 2018, 'Digital'],
      ['January', 3300, 'Avenida Veteranos', 2015, 'Analog'],
      ['March', 2000, 'Brgy. Baras', 2018, 'Analog'],
      ['January', 2600, 'Brgy. Baras', 2015, 'Internet'],
      ['January', 1800, 'Apitong', 2015, 'Digital'],
      ['January', 2100, 'Brgy. Baras', 2015, 'Analog']
    ]);

    var area = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'filter_productssold_area_div',
      'dataTable': data,
      'options': {
        'filterColumnLabel': 'Area',
        'ui': {
          'allowTyping': false,
          'allowMultiple': false,
          'allowNone': false,
          'sortValues': false,
          'label': 'Choose Area',
        }
      }
    });

    var year = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'filter_productssold_year_div',
      'dataTable': data,
      'options': {
        'filterColumnLabel': 'Year',
        'ui': {
          'allowTyping': false,
          'allowMultiple': false,
          'allowNone': false,
          'sortValues': false,
          'label': 'Choose Year',
        }
      }
    });

    var product = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'filter_productssold_product_div',
      'dataTable': data,
      'options': {
        'filterColumnLabel': 'Product Type',
        'ui': {
          'allowTyping': false,
          'allowMultiple': true,
          'allowNone': true,
          'sortValues': false,
          'label': 'Choose Product',
        }
      }
    });

    google.visualization.events.addListener(area, 'ready', drawChart);
    google.visualization.events.addListener(area, 'statechange', drawChart);
    google.visualization.events.addListener(year, 'ready', drawChart);
    google.visualization.events.addListener(year, 'statechange', drawChart);
    google.visualization.events.addListener(product, 'ready', drawChart);
    google.visualization.events.addListener(product, 'statechange', drawChart);

    function drawChart() {
      var areaData = new google.visualization.DataView(area.getDataTable());
      var filters = [{
          column: 2,
          value: area.getState().selectedValues[0]
        }
      ];

      var selectedYear = year.getState().selectedValues;
      if (typeof selectedYear !== 'undefined' && selectedYear.length > 0) {
        filters.push({
          column: 3,
          test: function(value, row, column, table) {
            return (selectedYear.indexOf(table.getValue(row, column)) > -1);
          }
        });
      }

      var selectedProducts = product.getState().selectedValues;
      if (typeof selectedProducts !== 'undefined' && selectedProducts.length > 0) {
        filters.push({
          column: 4,
          test: function(value, row, column, table) {
            return (selectedProducts.indexOf(table.getValue(row, column)) > -1);
          }
        });
      }

      areaData.setRows(areaData.getFilteredRows(filters));

      // group by 'Group' / 'Year'
      var dataGroup = google.visualization.data.group(
        areaData, [0, 3], [{
          column: 1,
          aggregation: google.visualization.data.sum,
          type: 'number',
          label: 'Sum'
        }, {
          column: 1,
          aggregation: google.visualization.data.count,
          type: 'number',
          label: 'Count'
        }]
      );
      dataGroup.sort([{
        column: 0
      }, {
        column: 1
      }]);

      // build final data table
      var monthOrder = [
        'January', 'February', 'March',
        'April', 'May', 'June',
        'July', 'August', 'September',
        'October', 'November', 'December'
      ];

      var finalData = new google.visualization.DataTable({
        cols: [{
          label: 'Group',
          type: 'string'
        }, {
          label: 'Amount',
          type: 'number'
        }, {
          label: 'Count',
          type: 'number'
        }, {
          label: 'Sort',
          type: 'number'
        }]
      });

      // add row for each month AMOUNT | COUNT
      var rowMonth = null;
      var rowIndex = null;
      for (var i = 0; i < dataGroup.getNumberOfRows(); i++) {
        if (rowMonth !== dataGroup.getValue(i, 0)) {
          rowMonth = dataGroup.getValue(i, 0);
          rowIndex = finalData.addRow();
          finalData.setValue(rowIndex, 0, rowMonth);
        }
        for (var x = 1; x < finalData.getNumberOfColumns(); x++) {
          switch (finalData.getColumnLabel(x)) {
            case 'Amount':
              finalData.setValue(rowIndex, x, dataGroup.getValue(i, 2).toString());
              break;

            case 'Count':
              finalData.setValue(rowIndex, x, dataGroup.getValue(i, 3).toString());
              break;

            case 'Sort':
              finalData.setValue(rowIndex, x, monthOrder.indexOf(rowMonth));
              break;
          }
        }
      }
      finalData.sort([{column: 3}]);

      var view = new google.visualization.DataView(finalData);
      view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'
      }, 2, {
        calc: 'stringify',
        sourceColumn: 2,
        type: 'string',
        role: 'annotation'
      }]);

      var ColumnChart = new google.visualization.ChartWrapper({
        'chartType': 'ColumnChart',
        'containerId': 'productssold_chart_div',
        'dataTable': view
      });
      ColumnChart.draw();
    }

    area.draw();
    year.draw();
    product.draw();
  },
  packages: ['controls', 'corechart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_productssold_area_div"></div>
<div id="filter_productssold_year_div"></div>
<div id="filter_productssold_product_div"></div>
<div id="productssold_chart_div"></div>

＆＃13;

Google图表：删除x轴的默认排序

1 个答案: