首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Chartjs重叠点击功能不起作用

Chartjs重叠点击功能不起作用
EN

Stack Overflow用户
提问于 2018-12-14 02:57:55
回答 1查看 487关注 0票数 0

我有一个简单的折线图,当两个或更多的点太近时,我就会有问题。问题是:工具提示显示一个点,而单击功能用于其他点。

在本例中,您可以看到,当我单击红线(值2)上的第一个点时,单击事件针对的是黑线(值0)

例如:https://codepen.io/ataufo/pen/NexppY

代码语言:javascript
运行
复制
var canvas = document.getElementById("lineChart");
var ctx = canvas.getContext('2d');


var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  datasets: [{
      label: "Stock A",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(225,0,0,0.4)",
      borderColor: "red", 
      borderCapStyle: 'square',
      pointBorderWidth: 0.1,
      pointHoverRadius: 6,
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      data: [2, 59, 80, 81, 56],
      spanGaps: false,
      datalabels: {
        enabled: true,
        allowOverlap: true,
        display: true,
        listeners: {
          click: function(context) {
            alert(context.dataIndex + " Red line");
          }
        }
          }
    }, {
      label: "Stock B",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "black",
      borderColor: "black", 
      borderCapStyle: 'square',
      pointBorderWidth: 0.1,
      pointHoverRadius: 6,
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      data: [0, 20, 60, 95, 64],
      spanGaps: false,
      datalabels: {
        enabled: true,
        allowOverlap: true,
        display: true,
        listeners: {
          click: function(context) {
            alert(context.dataIndex + " Black Line");
          }
        }
      }
    }

  ]
};

// Chart declaration:
var myBarChart = new Chart(ctx, {
  showTooltips: false,
  type: 'line',
  data: data
});

有没有人有办法解决这个问题?

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

https://stackoverflow.com/questions/53768432

复制
相关文章

相似问题

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