Question

我正在使用Google Donut Chart。

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

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

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

谷歌图表中是否有任何选项可以隐藏特定的切片以使其他切片看得更清楚？

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

Answer 1

图表本身没有选项，但隐藏切片可以使用DataView

完成

但不能避免扭曲剩余切片的大小，
相对于隐藏的切片

在以下示例中，添加了一列以使用隐藏切片计算％

然后选项pieSliceText: 'value'用于显示真正的％

DataView用于隐藏原始值列和具有大切片的行

＆＃13;

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']
});

＆＃13;

div {
  padding: 2px 2px 2px 2px;
}

＆＃13;

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

＆＃13;

隐藏Google Donut图表中的切片

1 个答案: