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

Question

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

function display_graph(id, label, data) {
var ctx = document.getElementById(id);
var data = {
    labels: data.labels,
    datasets: [
        {
            label: label,
            fill: false,
            lineTension: 0.1,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "rgba(75,192,192,1)",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderWidth: 1,
            borderJoinStyle: 'miter',
            pointBorderColor: "rgba(75,192,192,1)",
            pointBackgroundColor: "#fff",
            pointBorderWidth: 1,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "rgba(75,192,192,1)",
            pointHoverBorderColor: "rgba(220,220,220,1)",
            pointHoverBorderWidth: 2,
            pointRadius: 1,
            pointHitRadius: 10,
            data: data.assay_value,
            spanGaps: false
        }
    ]
};

//options
var options = {
    responsive: true,
    title: {
        display: true,
        position: "top",
        text: label,
        fontSize: 18,
        fontColor: "#111"
    },
    legend: {
        display: true,
        position: "bottom",
        labels: {
            fontColor: "#333",
            fontSize: 16
        }
    }
};
var Blanks_Chart=null;
Blanks_Chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: options
});}

原文由 tech_geek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 chart.js 注释插件 轻松地在图表上绘制线条，而不必手动处理画布中的渲染像素（旧方法会出错）。请注意，该插件由与 chart.js 相同的团队创建/支持，并在 chart.js 文档 中提到。

这是一个 示例代码笔， 演示如何在图表上创建一条线。

添加插件后，您只需在图表配置中设置 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'
        }
      }]
    }
  }
});

原文由 jordanwillis 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 chartOpts data: { de07a78d9e318ec5bc078a9777777777774ff7 options: { 有关详细信息，请参阅 此 github 帖子。

chart.js 有许多其他 可用的插件。

原文由 FireEmerald 发布，翻译遵循 CC BY-SA 4.0 许可协议