如何使用chartjs创建折线图？

Question

我需要创建折线图，例如img。

1）我不明白，如何删除背景灰色。 2）添加动态点0.38和2225并添加线。 请帮助。

这是我的代码

>>> import re
>>> arrows = re.compile(ur'[\u2190-\u21FF]')
>>> re.findall(arrows, u"a⇸b⇙c↺d↣e↝f")
[u'\u21f8', u'\u21d9', u'\u21ba', u'\u21a3', u'\u219d']

Answer 1

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中没有任何东西可以在图表上绘制线条，但是同一个团队创建了一个名为chartjs-plugin-annotation的好插件，您可以使用它来执行此操作。以下是如何在您想要的位置配置一行的示例（这将放在您的options配置中。

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,
    }
  }]
}

以下是展示此内容的codepen example。

Answer 2

1）尝试添加数据集：

    fill: false,

到您的数据集

2）不确定这是否可能

这是一个评论，但我还不能发表评论。