Google pie chart 插件的使用_google js插件圆饼-优快云博客

本文链接：https://blog.youkuaiyun.com/ltwang_tech/article/details/78253339

本文介绍了一种使用Google Visualization API实现选中多个slice饼图的方法。通过硬编码或Ajax获取数据，设置图表属性，监听点击和选中事件，实现饼图slice的多选功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下列代码可实现选中多个slice饼图

<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']
      });
      var currentSelection = [false, false, false, false];
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
/*        下面的data用hard code写死，当然也可以利用ajax向后台请求获得JSON数据,格式如下：
*         {
*  "cols": [
*        {"id":"","label":"Topping","pattern":"","type":"string"},
*        {"id":"","label":"Slices","pattern":"","type":"number"}
*      ],
*  "rows": [
*        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
*        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
*        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
*        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
*        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
*      ]
*}
*/       
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'TVModels');
        data.addColumn('number', 'Amount');
        data.addRows([['32HFL5011T/12', 333], ['47HFL7011T/12', 2], ['32HFL3009T/12', 22], ['32HFL5009T/12', 10]]);
        var options = {
          sliceVisibilityThreshold: 0,
          pieSliceText: 'percentage',// 显示百分比，如果要显示具体值，需要配置为pieSliceText: 'value'
          chartArea: {
            left: 10,
            top: 10,
            width: '100%',
            height: '90%'
          },
          tooltip: {
            trigger: 'none',
            text: 'value'
          }
        };

        function selectHandler() {//选中某块slice触发的回调函数
          var selectArray = [];
          for (var i = 0,
          len = currentSelection.length; i < len; i++) {
            if (currentSelection[i]) {
              var rowObj = {
                row: i
              };
              selectArray.push(rowObj);
            }
          }
          chart.setSelection(selectArray);
        }

        function clickHandler(targetID) {//点击某个slice的回调函数
          if (targetID) {
            var targetID = targetID["targetID"];
            var sliceTargetIDText = "slice#";
            var legendTargendIDText = "legendentry#";
            var textToRemove = "";
            var sliceNum = 0;

            //判断点击对象：legend或者slice
            if (targetID.search(sliceTargetIDText) == 0) {
              textToRemove = sliceTargetIDText;
            } else if (targetID.search(legendTargendIDText) == 0) {
              textToRemove = legendTargendIDText;
            } else {
              return;
            }
            //提取slice号并更新到被选中的slice数组里。
            sliceNum = Number(targetID.replace(textToRemove, ""));
            currentSelection[sliceNum] = !currentSelection[sliceNum]; //toggle
          }
        }
        //注册点击及选中handler回调函数以支持多重选中slice
        google.visualization.events.addListener(chart, 'select', selectHandler);
        google.visualization.events.addListener(chart, 'click', clickHandler);
        chart.draw(data, options);
      }</script>
  </head>

  <body>
    <div id="tvmodelspie" style="width: 500px; height: 250px;">
      <h3 align="center" class="piechartheader">TV Models</h3>
      <div id="piechart"></div>
    </div>
  </body>
</html>