chart.js 图表上的叠加线

2022-01-22 00:00:00 javascript chart.js

我想知道是否可以在 chart.js 图形(例如折线图)上叠加一条线?例如，在 x 轴上，一条水平线将在图上的值为 20 处绘制

I was wondering if it was possible to overlay a line ontop of a chart.js graph, such as a line graph ? For example, on the x axis a horizontal line would be drawn at value 20 across the graph

推荐答案

我创建了一个名为叠加图表的东西，我已将它添加到我的chart.js 分支中(https://github.com/leighquince/Chart.js) 可以在这种情况下使用.它的工作原理与折线图或条形图相同，唯一的区别是您声明了一个名为 type 的额外属性，该属性可以是 'line' 或 'bar'.然后只需调用 new Chart(ctx).Overlay(data).

I've created something called an overlay chart that i have added to my fork of chart.js (https://github.com/leighquince/Chart.js) that could be used in this situation. it works in the same was as a line or bar chart, only difference is you declare an extra property called type that can either be 'line' or 'bar'. Then just call new Chart(ctx).Overlay(data).

因此，对于您的示例，您可以只使用条形图，然后提供另一个数据集(比我使用的颜色更好)来显示线条.

So for your example you could just have your bar chart and then provided another data set (with some better colors than i have used) to show the line.

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [{
    label: "My First dataset",
    //new option, barline will default to bar as that what is used to create the scale
    type: "line",
    fillColor: "rgba(220,220,220,0.2)",
    strokeColor: "rgba(0,0,0,0.6)",
    pointColor: "rgba(0,0,0,0.6)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    datasetFill:false,
    data: [20, 20, 20, 20, 20, 20, 20]
  }, {
    label: "My First dataset",
    //new option, barline will default to bar as that what is used to create the scale
    type: "bar",
    fillColor: "rgba(220,20,220,0.2)",
    strokeColor: "rgba(220,20,220,1)",
    pointColor: "rgba(220,20,220,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(220,220,220,1)",
    data: [32, 25, 33, 88, 12, 92, 33]
  }]
};
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Overlay(data, {
  responsive: false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githack.com/leighquince/Chart.js/master/Chart.js"></script>

<canvas id="canvas" width="400"></canvas>

相关文章