在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屋!