Google Charts：円グラフのスライスの順序を変更するにはどうすればよいですか？

Question

円グラフのスライスの生成順序を変更するにはどうすればよいですか？ここに私のコードです。

var DEFAULT_PIE_CHART_OPTIONS = { 
     theme: 'material', 
     titleTextStyle: { fontSize: 12 }, 
     is3D: false, 
     pieSliceText: 'label', 
     colors: ['#8E142E','#C3CA21','#8A972B','#6FF522','#167D13'], 
     fontSize: 12, 
     pieHole: 0.6, 
     pieStartAngle: 180, 
     height: 600, 
     chartArea: { width: '100%', height: '100%', left: 0, top: 100 }, 
     legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } } 
    }; 
var chartOptions = DEFAULT_PIE_CHART_OPTIONS; 
     chartOptions.colors = null; 
     var chartOverallPmmLevelCalculated = new google.visualization.ChartWrapper({ 
      'chartType': 'PieChart', 
      'containerId': 'chartOverallPmmLevelCalculatedHtml', 
      options: chartOptions 
     }); 
function drawPieChart() { 
      var responseDataTable = levelTableChart.getDataTable(); 
      var chartDataTable = new google.visualization.DataTable(); 
      chartDataTable.addColumn('string', 'Fiscal'); 
      chartDataTable.addColumn('number', 'LEVEL'); 
      var chartDataTableRow = new Array(); 
      var rowCounter; 
      var levelValue; 
      for (rowCounter = 0; rowCounter < responseDataTable.getNumberOfRows() ; rowCounter++) { 
       var seek = 0 * 1; 
       levelValue = responseDataTable.getValue(rowCounter, 1); 
       if (levelValue !== null) { 
        chartDataTableRow[seek++] = "LEVEL " + levelValue.toString(); 
        chartDataTableRow[seek++] = responseDataTable.getValue(rowCounter, 2); 
       } else { 
        chartDataTableRow[seek++] = null; 
        chartDataTableRow[seek++] = null; 
       } 
       chartDataTable.addRow(chartDataTableRow); 
      } 
      chartOverallPmmLevelCalculated.setDataTable(chartDataTable); 
      chartOverallPmmLevelCalculated.draw(); 
     } 

ランダムなLEVEL情報で生成された生成された円グラフを添付しました。私は円グラフのスライスにLEVEL 0〜LEVEL 3を時計回りに表示するだけです。

Answer 1

ソートチャート

// sort data - first column 
data.sort([{column: 0}]); 

作業スニペット以下の参照を描く前のDataTable ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
     ['Fiscal', 'LEVEL'], 
 
     ['LEVEL 3',  30], 
 
     ['LEVEL 1',  12], 
 
     ['LEVEL 2',  42], 
 
     ['LEVEL 0',  8], 
 
    ]); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
     chartType: 'PieChart', 
 
     containerId: 'chart_div', 
 
     dataTable: data, 
 
     options: { 
 
     theme: 'material', 
 
     titleTextStyle: { fontSize: 12 }, 
 
     is3D: false, 
 
     pieSliceText: 'label', 
 
     fontSize: 12, 
 
     pieHole: 0.6, 
 
     pieStartAngle: 180, 
 
     height: 600, 
 
     chartArea: { width: '100%', height: '100%', left: 0, top: 100 }, 
 
     legend: { position: 'top', maxLines: 1, textStyle: { fontSize: 12, bold: true, italic: false } } 
 
     } 
 
    }); 
 

 
    // sort data - first column 
 
    data.sort([{column: 0}]); 
 

 
    chart.draw(); 
 
    }, 
 
    packages:['corechart'] 
 
});

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