时间戳

首页 > 解决方案 > 我应该在谷歌图表代码中调整什么来摆脱一些属性？(javascript)

javascript - 我应该在谷歌图表代码中调整什么来摆脱一些属性？(javascript)

问题描述

我应该在谷歌图表代码示例中更改什么以摆脱所有切片 % 并只为一个切片保留 % 以及显示每种颜色代表什么的列？

链接到谷歌图表 - https://developers.google.com/chart/interactive/docs/gallery/piechart#donut

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

我只想要下图中圈出的值：

图表图像

标签： javascriptcharts

解决方案

@JakeSteam 这是我到目前为止的代码。我可以为“其他人”“制作透明”lebel，但在这种情况下，我想摆脱“%”，所以只有 slice 保留值和颜色。 

<html>
      <head>
        <script type="text/javascript" src="loader.js"></script>

        <script type="text/javascript">

         google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Metric', 'Score', 'Site'],
        ['Uniqueness', 6.178, 'https://www.google.com/'],
        ['', 93.82, 'https://www.bing.com/']
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1]);

      var options = {
        legend: 'none',
        title: 'Unique Identifiability',
        pieHole: 0.6,
        colors: ['#EE7023', '#808080']

      };

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



      google.visualization.events.addListener(chart, 'select', function () {
        var selection = chart.getSelection(); 


        if (selection.length > 0) {

          window.open(data.getValue(selection[0].row, 2), '_blank');
          console.log(data.getValue(selection[0].row, 2));
        }
      });

推荐阅读