Ng2-charts 十字准线插件在 Angular 中不工作

Question

我正在尝试在 Angular 5 应用程序中使用 ng2-charts 的十字准线插件。我需要使用十字准线来插入点。这是我在文档中找到的演示：https://chartjs-plugin-crosshair.netlify.app/samples/。在文档中，它说插件将允许我们使用 tooltip mode 作为“interpolate”。但它不起作用。

我通过 NPM 安装了插件并将其导入到我的应用程序中。然后我添加了插件选项。但是插件没有出现。该应用程序说缺少模块“chartjs-plugin-crosshair”。谷歌搜索一天后找不到任何解决方案。我正在给 stackblitz link: https://stackblitz.com/edit/ng2-charts-crosshair-plugin

public lineChartOptions = {
    
    responsive: true,

    tooltips:{
      enabled: true,
      intersect: false,
      mode: "x" //"interpolate"
    },

    plugins:{

       crosshair:{
    
          line:{
            color:'#000',
            width: 3
          }
       }
    }
};

Answer 1

我更新了 chart.js 的依赖项并显示了十字准线。

工作Stackblitz

这是另一个使用 charts-crosshair-plugin 的 Stackblitz。

Ng2-charts 十字准线插件在 Angular 中不工作

Ng2-charts crosshair plugin not working in Angular

graph

chart.js

ng2-charts

angular