谷歌圖表：餅圖切片根據傳說

Question

\t \t google.load('visualization', '1.1', { 
 
\t \t \t packages : [ 'controls' ] 
 
\t \t }); 
 
\t \t google.load('visualization', '1', { 
 
\t \t \t packages : [ 'table' ] 
 
\t \t }); 
 
\t \t google.load('visualization', '1.0', { 
 
\t \t \t 'packages' : [ 'corechart' ] 
 
\t \t }); 
 
\t \t google.setOnLoadCallback(drawVisualization); 
 
function drawVisualization() { 
 
    var data = [{tagId:'2a:10',isSafe:'Safe'},{tagId:'dd:80',isSafe:'Unsafe'},{tagId:'0a:07',isSafe:'Safe'},{tagId:'29:11',isSafe:'Safe'}]; 
 
      var dataArray = []; 
 
      var datatable = new google.visualization.DataTable(); 
 
      datatable.addColumn('string', 'TagID'); 
 
      datatable.addColumn('string', 'Status'); 
 

 
      $.each(data, function(i, obj) { 
 
       dataArray.push([ obj.tagId, obj.isSafe]); 
 
      }); 
 

 
      datatable.addRows(dataArray); 
 

 
      var tagDivPicker = new google.visualization.ControlWrapper({ 
 
       'controlType' : 'CategoryFilter', 
 
       'containerId' : 'tag_control_div', 
 
       'options' : { 
 
\t \t \t \t \t filterColumnIndex : 0, 
 
\t \t \t \t \t 'ui' : { 
 
\t \t \t \t \t \t 'labelStacking' : 'vertical', 
 
\t \t \t \t \t \t 'allowTyping' : false, 
 
\t \t \t \t \t \t 'allowMultiple' : false 
 
\t \t \t \t \t //,'cssClass':'form-control1 input-sm m-bot15' 
 
\t \t \t \t \t } 
 
        } 
 
      }); 
 
      var table_data = new google.visualization.ChartWrapper({ 
 
       'chartType' : 'Table', 
 
       'containerId' : 'table_data', 
 
       'view' : { 
 
        'columns' : [ 0, 1] 
 
       } 
 
      }); 
 

 
      var dataGroupColumnChart = google.visualization.data.group(
 
        datatable, [1], [{ 
 
         'column': 1, 
 
         'aggregation': google.visualization.data.count, 
 
         'type': 'number' 
 
        }]); 
 

 
      var pieChart = new google.visualization.ChartWrapper({ 
 
       'chartType': 'PieChart', 
 
       'containerId': 'pie_chart', 
 
       'dataTable': dataGroupColumnChart, 
 
       options: { 
 
        'width': 600, 
 
        'height': 400, 
 
        title: 'Total Compliance', 
 
        slices: {0: {color: 'green'}, 1:{color: 'red'}} 
 
       } 
 
      }); 
 
      pieChart.draw(); 
 

 
      // Create the dashboard. 
 
      var dashboard = new google.visualization.Dashboard(document 
 
        .getElementById('dashboard')) 
 
      .bind([ tagDivPicker ], 
 
        [ table_data ]); 
 

 
      dashboard.draw(datatable); 
 

 
      google.visualization.events.addListener(tagDivPicker, 'statechange', function(event) { 
 
       pieChart.setDataTable(google.visualization.data.group(
 
        // get the filtered results 
 
        table_data.getDataTable(), 
 
        [2], [{ 
 
         'column': 2, 
 
         'aggregation': google.visualization.data.count, 
 
         'type': 'number' 
 
        }] 
 
       )); 
 
       // redraw the pie chart to reflect changes 
 
       pieChart.draw(); 
 
      }); 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
\t <script type="text/javascript" 
 
\t \t src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
\t <div style="float: left;" id="table_data"></div> 
 
\t <div style="float: right;" id="pie_chart"></div> 
 
\t <div id="tag_control_div"></div> 
 
</div>

語境：

我使用谷歌圖的儀表盤和彙總操縱圖表。目前，我可以根據包含餅圖和CategoryFilter的多個過濾器更改儀表板數據。

當我選擇CategoryFilter並且如果只有一個切片可用，餅圖將採用第一個切片顏色，這不是很好的用戶界面。

例如，以下數據表明安全不安全圖表。所以傳說中的顏色將變成綠色，以保證安全，而紅色則變爲不安全。

問題陳述：

現在，如果沒有可用的安全記錄，然後餅圖應該顯示爲紅色片，但圖表需要第一片爲默認顏色如果有針對第二切片或圖例沒有記錄。

數據：

[{"tagId":"2a:10","isSafe":"Safe"},{"tagId":"dd:80","isSafe":"Unsafe"},{"tagId":"0a:07","isSafe":"Safe"},{"tagId":"29:11","isSafe":"Safe"}] 

Answer 1

不需要既jsapi和loader.js

加，根據谷歌圖表的release notes ...

的版本仍然可以通過jsapi加載器不再持續更新。從現在起請使用新的gstatic裝載機（loader.js）。

這將改變load語句...

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

（可以包括callback在load語句）

2.因爲餅圖被單獨繪製，彙總來自表格的數據，
每次'ready'事件被觸發

然後分配切片的顏色，根據表圖表中的行值，使用colors選項

看到下面的工作片段...

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

 
function drawVisualization() { 
 
    var data = [{tagId:'2a:10',isSafe:'Safe'},{tagId:'dd:80',isSafe:'Unsafe'},{tagId:'0a:07',isSafe:'Safe'},{tagId:'29:11',isSafe:'Safe'}]; 
 
    var dataArray = []; 
 
    var datatable = new google.visualization.DataTable(); 
 
    datatable.addColumn('string', 'TagID'); 
 
    datatable.addColumn('string', 'Status'); 
 

 
    $.each(data, function(i, obj) { 
 
    dataArray.push([obj.tagId, obj.isSafe]); 
 
    }); 
 
    datatable.addRows(dataArray); 
 

 
    var tagDivPicker = new google.visualization.ControlWrapper({ 
 
    controlType: 'CategoryFilter', 
 
    containerId: 'tag_control_div', 
 
    options: { 
 
     filterColumnIndex: 0, 
 
     ui: { 
 
     labelStacking: 'vertical', 
 
     allowTyping: false, 
 
     allowMultiple: true 
 
     } 
 
    } 
 
    }); 
 

 
    var table_data = new google.visualization.ChartWrapper({ 
 
    chartType: 'Table', 
 
    containerId: 'table_data', 
 
    view: { 
 
     columns: [0, 1] 
 
    } 
 
    }); 
 

 
    var dashboard = new google.visualization.Dashboard(document 
 
    .getElementById('dashboard')) 
 
    .bind([tagDivPicker], [table_data]) 
 
    .draw(datatable); 
 

 
    google.visualization.events.addListener(table_data, 'ready', function() { 
 
    var colors = { 
 
     Safe: 'green', Unsafe: 'red' 
 
    }; 
 
    var pieColors = []; 
 

 
    var dataGroupColumnChart = google.visualization.data.group(
 
     table_data.getDataTable(), [1], [{ 
 
     column: 1, 
 
     aggregation: google.visualization.data.count, 
 
     type: 'number' 
 
    }]); 
 

 
    for (var i = 0; i < dataGroupColumnChart.getNumberOfRows(); i++) { 
 
     pieColors.push(colors[dataGroupColumnChart.getValue(i, 0)]); 
 
    } 
 

 
    var pieChart = new google.visualization.ChartWrapper({ 
 
     chartType: 'PieChart', 
 
     containerId: 'pie_chart', 
 
     dataTable: dataGroupColumnChart, 
 
     options: { 
 
     width: 600, 
 
     height: 400, 
 
     title: 'Total Compliance', 
 
     colors: pieColors 
 
     } 
 
    }); 
 
    pieChart.draw(); 
 
    }); 
 
}

.float { 
 
    display: inline-block; 
 
    padding: 4px; 
 
    vertical-align: top; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
    <div class="float" id="table_data"></div> 
 
    <div class="float" id="tag_control_div"></div> 
 
    <div id="pie_chart"></div> 
 
</div>