1
\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>コンテキストに基づいて：
私は、チャートの操作のために、Googleのチャートダッシュボードおよび凝集を使用しています。現在、私は、円グラフとカテゴリフィルタを含む複数のフィルタに基づいてダッシュボードデータを変更することができます。
CategoryFilterを選択したときにスライスが1つしかない場合、円グラフは素敵なユーザーインターフェイスではない最初のスライスカラーを取ります。
たとえば、以下のデータはSafe-Unsafe Chartを示唆しています。したがって、伝説の色は、安全でないと安全な場合は緑色になり、安全でない場合は赤色になります。
問題文：使用可能な安全なレコードがない場合
は今、その後円グラフは、RED色でスライスを表示するはずが、2番目のスライスや伝説のレコードがない場合、チャートはデフォルトの色として最初のスライスを取ります。
データ：
[{"tagId":"2a:10","isSafe":"Safe"},{"tagId":"dd:80","isSafe":"Unsafe"},{"tagId":"0a:07","isSafe":"Safe"},{"tagId":"29:11","isSafe":"Safe"}]
をスライス色を割り当てますたくさん。 –