在chart.js图形上叠加线 [英] Overlay Line on chart.js Graph

问题描述

我想知道是否可以在chart.js图的顶部覆盖一条线，例如一条线图？例如，在x轴上将在整个图上以值20绘制一条水平线

解决方案

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

因此，在您的示例中，您可能只有您的条形图，然后提供了另一个数据集（颜色比我以前使用的要好一些）来显示线条。

  var data = {标签：[一月，二月，三月，四月，五月，六月，七月]，数据集：[{标签：我的第一个数据集，//新选项，默认为bar，因为它用于创建比例尺类型：线，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：假，数据：[20、20、20、20、20 ，20、20]}，{标签：我的第一个数据集，//新选项，barline将默认设置为bar d创建比例尺类型： bar，fillColor： rgba（220,20,220,1），strokeColor： rgba（220,20,220,1），pointColor： rgba（220,20,220,1）， pointStrokeColor：＃fff，pointHighlightFill：＃fff，pointHighlightStroke： rgba（220,220,220,1），数据：[32、25、33、88、12、92、33]}]}; var ctx = document .getElementById（ canvas）。getContext（ 2d）; var chart = new Chart（ctx）.Overlay（data，{响应：false}）;  

< pre class = snippet-code-html lang-html prettyprint-override> < 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><画布id = canvas width = 400>< / canvas>

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

解决方案

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>

这篇关于在chart.js图形上叠加线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！