Chart.js如何在画布中为条形图添加一条线 [英] Chart.js how to add a line in the canvas for bar chart

问题描述

使用Chart.js - 条形图如何为成就添加一条直线，如果超过75/100是一个pass - 所以需要在75计数中的一行。或者网格上的粗线... 4px solid等...

With a Chart.js - Bar Chart how to add a straight line for achievements such as if over 75/100 is a pass - so need a line in the 75 count. or a thick line on the grid... 4px solid etc...

http://drawingwithnumbers.artisart.org/wp-content/uploads/2013/03/v8-simple-measures.png
像这个图像右边的绿色剥离线（目标0.7）...

http://drawingwithnumbers.artisart.org/wp-content/uploads/2013/03/v8-simple-measures.png Like the green stripped line (Target 0.7) on the right hand side...of this image...

所以如果我使用这个小提琴一个示例...需要一个直线，值为75000
http://jsfiddle.net/rnX2Z / 1 /

So if I use this fiddle as an example... would need a straight line at values 75000 http://jsfiddle.net/rnX2Z/1/

尝试添加没有运气的代码...

Was trying to add this code with no luck...

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,200);
ctx.lineTo(500,200);
ctx.stroke();

正在考虑在画布上添加一行，但是有代码的麻烦 - 添加一些代码到.js ...任何帮助或方向采取，因为其余的图表看起来很棒...会很酷...感谢

Was looking at adding a line on the canvas - but have trouble with the code - or do I have to add some code to the .js... any help or a direction to take, as the rest of the charts look fantastic .. would be cool... thanks

推荐答案

如果图表来自highcharts.com，按照示例...

If the chart is from highcharts.com, as per example...

http://jsfiddle.net/wergeld/hXDYh/2/

<script type="text/javascript" src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>

然后很多Javascript ...等...需要一个JSON /颜色

and then lots of Javascript ... etc... needs a JSON / Data of Plot line and Color

不确定 - ChartJS - 没有找到相关信息 - 可能是SVG？

Not sure about - ChartJS - have not found info for this - possible a SVG ?

为什么一个-1之前我添加了这个答案...更多的建议，任何人读这个...

Not sure why a -1 before I added this answer... More of a suggestion for anyone reading this...

干杯
西蒙

这篇关于Chart.js如何在画布中为条形图添加一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！