Google pie chart 插件的使用

来源：互联网发布：中文域名网站编辑：程序博客网时间：2024/06/05 14:23
下列代码可实现选中多个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>
阅读全文
0 0