Question

我在一个页面上创建了4个圆环图，中间有一些文字，我知道这可以通过在中心放置DIV来完成，但我不能使用它，因为当文本没有导出时图表下载为PNG ：

演示：https://jsfiddle.net/cmyker/ooxdL2vj/

我需要跟踪中心文字的点击，我尝试使用pageX，pageY来确定是否在中心部分进行了点击。

坐标是矩形截面的角部，其位于圆环图的中心孔内。很可能有文本。

jQuery('#canvas').on('click',function(e){
  var pageX = e.pageX;                                  
  var pageY = e.pageY;
      if((pageY >= 379 && pageY <= 571) && (pageX >= 440 && pageX <= 629)){   //coordinates are of rectangular area which has text inside the center of doughnut chart.
             //do something                                          
      }
});

但是如果屏幕的分辨率不同，这将不起作用，因为坐标会有所不同。

有什么想法吗？

我尝试使用raphael.js使中心可点击但不太确定这种尝试。我正在尝试使用container方法在甜甜圈的中心孔中创建一个圆圈，可以在其上附加点击处理程序。

使用 Raphael JS

的代码信息

Chart.pluginService.register({
                  beforeDraw: function(chart) {
                  if(chart['data']['midNum']){
                      var width = chart.chart.width,
                          height = chart.chart.height,
                          ctx = chart.chart.ctx;

                      ctx.restore();
                      var fontSize = (height / 114).toFixed(2);
                      ctx.font = fontSize + "em sans-serif";
                      ctx.textBaseline = "middle";

                      var text = chart['data']['midNum'],
                          textX = Math.round((width - ctx.measureText(text).width) / 2),
                          textY = height / 2.5;
                        var chartID = chart['chart']['canvas']['id']; //the ID of element on which this donut was created

                        var paper  = Raphael(chartID,textX,textY); //trying to use the container approach
                        var circle = paper.circle(textX, textY, 10);
                            circle.attr("fill", "#f00");
                      //ctx.clearRect(0,0,width,height);
                      //ctx.fillText(text, textX, textY);
                      //ctx.save();
                    }
                  }
                })

使用chart.js在圆环图中心的事件处理程序

0 个答案: