Question

我使用chart.js画了一个折线图。对于标签和数据集，我从数据库中获取值。我是chart.js及其非常强大的库的新手，但我无法完全理解它。我想画多个水平线。就像数据集的平均值，标准偏差和最小值和最大值一样。我在stackoverflow中尝试了这个问题，但是这些都给出了错误，或者可能是我无法理解工作。这是我的chart.js代码

1234
[Finished in 0.4s]

Answer 1

您可以使用chart.js annotation plugin在图表上轻松绘制线条，而不必手动渲染画布中的渲染像素（旧方法会给您带来错误）。请注意，该插件由与chart.js相同的团队创建/支持，并在chart.js docs中提及。

这是一个example codepen，展示了在图表上创建一条线。

添加插件后，只需在图表配置中设置annotation属性即可。这是一个例子。

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January", "February"],
    datasets: [{
      label: 'Dataset 1',
      borderColor: window.chartColors.blue,
      borderWidth: 2,
      fill: false,
      data: [2, 10]
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Draw Line On Chart'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        scaleID: 'y-axis-0',
        value: 5,
        borderColor: 'rgb(75, 192, 192)',
        borderWidth: 4,
        label: {
          enabled: false,
          content: 'Test label'
        }
      }]
    }
  }
});

Answer 2

如果您使用的是 NPM 软件包chartjs-plugin-annotation.js，那么可能会忘记的重要事情是注册插件。

首先安装npm软件包（此处用于 React ）：

npm i react-chartjs-2                (depends on your framework)
npm i chartjs-plugin-annotation      (always required)

请参见Vue.js或Angular了解其框架依赖的软件包。

选项1：全局插件注册

import { Line } from 'react-chartjs-2';
import Chart from 'chart.js';
import * as ChartAnnotation from 'chartjs-plugin-annotation';

Chart.plugins.register([ChartAnnotation]); // Global

// ...
render() {
    return (
        <Line data={chartData} options={chartOpts} />
    )
}

选项2：每个图表插件注册

import { Line } from 'react-chartjs-2';
import * as ChartAnnotation from 'chartjs-plugin-annotation';

// ...
render() {
    return (
                                                   {/* per chart */}
        <Line data={chartData} options={chartOpts} plugins={[ChartAnnotation]} />
    )
}

chartData等效于data: {部分，从jordanwillis answer到chartOpts到options: {。有关更多信息，请参见this github帖子。

chart.js还有许多其他plugins available。

Answer 3

如果在Chartkick gem中使用它，以下是使它在Rails视图中工作的示例：

<%=
  line_chart profit_per_day_chart_path(staff), xtitle: 'Day', ytitle: 'Profit',
    library: {
      annotation: {
        annotations: [
          {
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-0',
            value: 20,
            label: {
              content: 'My Horizontal Line',
              enabled: true
            }
          }
        ]
      }
    }
%>

确保您首先已向Chart.js注册了chartjs-plugin-annotation.js插件：

import ChartAnnotationsPlugin from 'chartjs-plugin-annotation';
Chart.plugins.register(ChartAnnotationsPlugin);

Answer 4

如果要绘制阈值线，最简单的方法是使用混合折线图。

注意：使数组充满阈值，并且长度应与数据集相同。

df.groupby('month')['hours'].sum().plot(kind='bar')

在v2上的chart.js中的图表上绘制水平线

4 个答案: