javascript - 求助:ChartJS注释不显示

Question

Closed. This question needs details or clarity。它当前不接受答案。
                        
                    
                
            
        
            
        
                
                    
                
            
                
                    想改善这个问题吗？添加详细信息并通过 editing this post阐明问题。
                
                    上个月关闭。
            
        

    

编辑：我通过清理package.json文件解决了我的问题。

我已经读过其他问题，但是在github页面上没有成功，并且我已经在github问题页面上做了 post

我尝试在图表中显示一条线（chartjs-plugin-annotation），但未成功

我使用ReactJs，安装npm，这是我的代码

let chart = new Chart(myChartRef, {
                type: "line",
                data: {
                    labels: date,
                    datasets: [{ label: measure, data: quality, borderColor: "blue", showLine: true, pointRadius: 10, pointHoverRadius: 15 }]
                },
                options: {
                    events: ['click'],
                    responsive: true,
                    scales: {
                        xAxes: [{
                            type: 'time',
                            distribution: 'series'
                        }]
                    },
                    tooltips: {
                        mode: "index",
                        intersect: true
                    },
                    plugins: {
                        annotation: {
                            annotations: [{
                                type: 'line',
                                mode: 'horizontal',
                                scaleID: 'y-axis-0',
                                value: 62,
                                borderColor: 'rgb(255, 192, 192)',
                                borderWidth: 4,
                            }]
                        }
                    }
                }
            });

我不知道为什么它不起作用

最佳答案

如果您使用的是reactjs，则有一个react-chartjs2 npm包，一个chartjs的react包装器。

在此处检查其文档：https://github.com/jerairrest/react-chartjs-2

沙箱：https://codesandbox.io/s/react-line-chart-js-ldss1

对于您的示例，请尝试以下操作：

import React from "react";
import { render } from "react-dom";
import { Line } from "react-chartjs-2";

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul"],
  datasets: [
    {
      label: "My First dataset",
      events: ["click"],
      responsive: true,
      scales: {
        xAxes: [
          {
            type: "time",
            distribution: "series"
          }
        ]
      },
      tooltips: {
        mode: "index",
        intersect: true
      },
      plugins: {
        annotation: {
          annotations: [
            {
              type: "line",
              mode: "horizontal",
              scaleID: "y-axis-0",
              value: 62,
              borderColor: "rgb(255, 192, 192)",
              borderWidth: 4
            }
          ]
        }
      },
      data: [1500000, 3900000, 3000000, 4100000, 2300000, 1800000, 2000000]
    }
  ]
};

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <Line data={data} />
  </div>
);

render(<App />, document.getElementById("root"));

关于javascript - 求助:ChartJS注释不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60719104/

上一篇：javascript - 服务器端c#和客户端javascript，带有json加载Highcharts甘特图任务进度指示器，需要更改工具提示和标签名称

下一篇：javascript - 为什么 Sequelize 时间戳没有关闭

相关文章：

javascript - Django:如何将 javascript var 作为 ajax 中的参数传递给 Django URL？

javascript - Javascript 中的 sleep 等效项

reactjs - 在不同的路线上运行 SPA

javascript - 添加趋势线到现有图表 Chart.js

javascript - ChartJS数据溢出图表区

javascript - 如何在运行 Mongodb 的 Mongoose 中执行脚本？

javascript - 判断一组矩形元素定义的区域是否为矩形

javascript - 过滤器不适用于 React 中具有 null 值的对象

javascript - ./src/App.js 模块未找到 : Can't resolve '@material-ui/data-grid' in xxx

javascript - 为什么我用 Chart.js 创建的圆环图没有出现？

Answer 1

如果您使用的是reactjs，则有一个react-chartjs2 npm包，一个chartjs的react包装器。

在此处检查其文档：https://github.com/jerairrest/react-chartjs-2

沙箱：https://codesandbox.io/s/react-line-chart-js-ldss1

对于您的示例，请尝试以下操作：

import React from "react";
import { render } from "react-dom";
import { Line } from "react-chartjs-2";

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul"],
  datasets: [
    {
      label: "My First dataset",
      events: ["click"],
      responsive: true,
      scales: {
        xAxes: [
          {
            type: "time",
            distribution: "series"
          }
        ]
      },
      tooltips: {
        mode: "index",
        intersect: true
      },
      plugins: {
        annotation: {
          annotations: [
            {
              type: "line",
              mode: "horizontal",
              scaleID: "y-axis-0",
              value: 62,
              borderColor: "rgb(255, 192, 192)",
              borderWidth: 4
            }
          ]
        }
      },
      data: [1500000, 3900000, 3000000, 4100000, 2300000, 1800000, 2000000]
    }
  ]
};

const styles = {
  fontFamily: "sans-serif",
  textAlign: "center"
};

const App = () => (
  <div style={styles}>
    <Line data={data} />
  </div>
);

render(<App />, document.getElementById("root"));