Javascript 如何使用chartjs创建线图?

Javascript 如何使用chartjs创建线图?,javascript,charts,chart.js,Javascript,Charts,Chart.js,我需要创建线图,例如img。 1) 我不明白,怎么删除背景灰。 2) 添加动态点0.38和2225,然后添加直线。 请帮忙 这是我的密码 var canvas = document.getElementById("lineChart"); var ctx = canvas.getContext("2d"); var data = { labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5,

我需要创建线图,例如img。

1) 我不明白,怎么删除背景灰。 2) 添加动态点0.38和2225,然后添加直线。 请帮忙

这是我的密码

 var canvas = document.getElementById("lineChart");
    var ctx = canvas.getContext("2d");

    var data = {
        labels: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
        datasets: [
            {
                type: 'line',
                label: 'Basic',
                data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
            }
        ]
    };


    var myNewChart = new Chart(ctx , {
        type: "line",
        data: data
    });
1) 尝试添加数据集:

    fill: false,
到您的数据集

2) 不确定这是否可能

这将是一个注释,但我还不能评论。

1)下面是一个示例,说明如何只显示下面的行,而不显示下面的填充。基本上,您只需使用
fill:false
选项

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels:
[0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35, 0.4, 0.45, 0.5, 0.55, 0.6, 0.65, 0.7, 0.75, 0.8, 0.85, 0.9, 0.95, 1],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [19304,13433,9341,6931,5169, 3885,2927,2159,1853,1502, 1176,911,724,590,491, 400,335,280,239,200]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Drsw Line on Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
  }
});
2) 在chart.js中没有内置任何东西可以在图表上画线,但是同一个团队已经创建了一个很好的插件,名为,您可以使用它来做这件事。下面是一个示例,说明如何在所需的位置配置一条线(这将进入
选项
配置中)

annotation: {
  annotations: [{
    type: 'line',
    mode: 'horizontal',
    scaleID: 'y-axis-0',
    value: 2225,
    borderColor: 'rgb(75, 192, 192)',
    borderWidth: 4,
    label: {
      enabled: true,
      content: 'Point Label',
      yAdjust: -16,
    }
  }]
}

下面是一个例子来说明这一点。

标题没有描述问题中的问题。谢谢回答。