首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用ChartJS深入查看图表?

如何使用ChartJS深入查看图表?
EN

Stack Overflow用户
提问于 2018-07-31 17:24:51
回答 1查看 14.8K关注 0票数 12

令我非常惊讶的是,我几乎找不到关于这个主题的任何信息。

我有一个ChartJS饼图,我想在单击该饼图的一个切片后深入查看该饼图。

你会怎么做呢?

谢谢

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-02 08:10:38

我已经用这个很棒的答案解决了我的问题:

Click events on Pie Charts in Chart.js

代码:

    $(document).ready(function() {
      var canvas = document.getElementById("myChart");
      var ctx = canvas.getContext("2d");
      var myNewChart = new Chart(ctx, {
         type: 'pie',
         data: data
      });

      canvas.onclick = function(evt) {
      var activePoints = myNewChart.getElementsAtEvent(evt);
      if (activePoints[0]) {
         var chartData = activePoints[0]['_chart'].config.data;
         var idx = activePoints[0]['_index'];

         var label = chartData.labels[idx];
         var value = chartData.datasets[0].data[idx];
         var color = chartData.datasets[0].backgroundColor[idx]; //Or any other data you wish to take from the clicked slice

         alert(label + ' ' + value + ' ' + color); //Or any other function you want to execute. I sent the data to the server, and used the response i got from the server to create a new chart in a Bootstrap modal.
       }
     };
  });

这很好用。我没有提醒信息,而是使用AJAX将其发送到服务器,并在引导模式中显示一个新图表。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51609922

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档