首页 > 解决方案 > 如何使用 Google 可视化在环形图外部显示低值?

问题描述

当我使用以下 html 代码创建谷歌甜甜圈图时

    function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     50],
      ['Eat',      50],
      ['Commute',  5],

    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.63,
      enableInteractivity: false,
      chartArea: {left: 5, right: 5, top: 5, bottom: 5, width: "100%", height: "100%"},
      tooltip: {trigger: 'none'},
      sliceVisibilityThreshold: 0,
      pieSliceBorderColor: "#FFBE33",


       slices: {
                        0: {
                            color: '#FFBE33',
                            textStyle: {bold: false, fontSize: 12, color: 'white'}
                        },
                        1: {
                            color: 'blue',
                            textStyle: {bold: false, fontSize: 12, color: 'white'}
                        },
                       2: {
                            color: 'black',
                            textStyle: {bold: false, fontSize: 12, color: 'white'}
                        }
                    }


    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));

    chart.draw(data, options);
  }

它产生这样的输出:

<5 值的圆环图

当我给出 <5 的值时,它不会在圆环图上显示百分比值。但是当我给出 >5 值时,意味着它显示正确。

> 5值的甜甜圈图

我怎样才能像这样在圆环图的外部或内部显示百分比值?

预期的甜甜圈图

标签: chartsgoogle-apigoogle-visualizationpie-chartdonut-chart

解决方案


推荐阅读