隐藏谷歌圆环图中的切片

Hide Slice in Google Donut Chart

本文关键字：切片 圆环图 谷歌 隐藏      更新时间：2023-09-26

我正在使用谷歌圆环图。

就我而言，有时我会有以下数据

{
    DATA_1: 10,
    DATA_2: 15,
    INVALID_DATA: 10000000 (Big Number)
}

在这种情况下，我的有效数据显示非常薄或在图表中不可见的切片。

Google图表中是否有任何选项可以隐藏特定的切片以使其他切片更好地显示？

我希望有效数据显示INVALID_DATA的百分比，但只是隐藏INVALID_DATA切片。

图表

本身没有选项，但隐藏切片可以通过DataView

但无法避免歪斜剩余切片的大小，
相对于隐藏切片

在以下示例中，添加了一列以计算具有隐藏切片的 %

然后选项pieSliceText: 'value'用于显示真实的%

DataView用于隐藏原始值列和包含大切片的行

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Data Type', 'Value'],
      ['DATA_1', 10],
      ['DATA_2', 15],
      ['INVALID_DATA', 10000000]
    ]);
    var options = {
      pieHole: 0.4,
      pieSliceText: 'value',
      theme: 'maximized',
      height: 262,
      width: 262,
    };
    // get total -- sum
    var dataGroup = google.visualization.data.group(
      data,
      [{column: 0, type: 'string', modifier: function () {return '';}}],
      [{column: 1, type: 'number', aggregation: google.visualization.data.sum}]
    );
    var hideRows = [];
    data.addColumn({type: 'number', label: '%'});
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      // set % value
      data.setValue(i, 2, data.getValue(i, 1) / dataGroup.getValue(0, 1));
      // hide big #
      if (data.getValue(i, 2) > .99) {
        hideRows.push(i);
      }
    }
    var numberFormat = new google.visualization.NumberFormat({
      pattern: '#,##0.00000 %'
    });
    numberFormat.format(data, 2);
    var dataView = new google.visualization.DataView(data);
    dataView.hideColumns([1]);
    dataView.hideRows(hideRows);
    var pieChart = new google.visualization.PieChart(document.getElementById('pieChart_div'));
    pieChart.draw(dataView, options);
    var tableChart = new google.visualization.Table(document.getElementById('tableChart_div'));
    tableChart.draw(data);
  },
  packages: ['corechart', 'table']
});
div {
  padding: 2px 2px 2px 2px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="pieChart_div"></div>
<div id="tableChart_div"></div>

相关文章：