谷歌图表：饼图切片基于传说-Java 学习之路

google.load('visualization', '1.1', {
			packages : [ 'controls' ]
		});
		google.load('visualization', '1', {
			packages : [ 'table' ]
		});
		google.load('visualization', '1.0', {
			'packages' : [ 'corechart' ]
		});
		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' : {
					filterColumnIndex : 0,
					'ui' : {
						'labelStacking' : 'vertical',
						'allowTyping' : false,
						'allowMultiple' : false
					//,'cssClass':'form-control1 input-sm m-bot15'
					}
                  }
            });
            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>
	<script type="text/javascript"
		src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
	<div style="float: left;" id="table_data"></div>
	<div style="float: right;" id="pie_chart"></div>
	<div id="tag_control_div"></div>
</div>

语境：

我正在使用Google Chart信息中心和聚合来操纵图表 . 目前，我可以根据多个过滤器更改仪表板数据，其中包括饼图和CategoryFilter .

当我选择CategoryFilter并且如果只有一个切片可用时，饼图采用第一个切片颜色，这不是很好的用户界面 .

例如，下面的数据表明Safe-Unsafe Chart . 所以传说颜色为绿色，安全，红色为不安全 .

问题陈述：

现在，如果没有可用的安全记录，那么饼图应该显示具有RED颜色的切片，但如果没有第二个切片或图例的记录，则图表将第一个切片作为默认颜色 .

数据：

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

1 回答

1. 不需要 jsapi 和 loader.js

另外，根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致地更新 . 从现在开始，请使用新的gstatic loader（loader.js） .

这会将 load 语句更改为......

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

（您可以在 load 语句中包含 callback ）

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>

回复于 2024-04-27T05:23:31+08:00

谷歌图表：饼图切片基于传说

1 回答

相关问题