个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
32
4
我正在使用 Chart.js，我将创建一个小条形图。如何在 y 轴上绘制红线(无需创建新数据集)，如图片所示？
在不同类型的图表中创建这条线没有问题，但在条形图中我找不到任何解决方案。
我的代码:
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="../Chart.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*70)};
var orders = [ '181-1','181-2','181-3','182-1','183-1','183-2','183-3','183-4','184-1','184-2'];
var barChartData = {
labels : orders,
datasets : [
{
label: "Order",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data : [6,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),5,6]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).Bar(barChartData, {
responsive : true,
animation: true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
// multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
tooltipTemplate: function(valuesObject){
console.log(valuesObject);
// do different things here based on whatever you want;
var label = valuesObject.label
var objLen = label.length;
// 111-1
var string = label.substring(0,objLen-2);
console.log(string);
return "Order nr: " + string;
}
});
最佳答案
要添加红线，您需要扩展默认条形图并将红线添加到特定位置。这是将红线添加到条形图的代码。你只需要计算出需要添加红线的位置即可。
这是完整的 HTML
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="canvas" height="450" width="600"></canvas>
</div>
<script type="text/javascript">
var randomScalingFactor = function(){ return Math.round(Math.random()*70)};
var orders = [ '181-1','181-2','181-3','182-1','183-1','183-2','183-3','183-4','184-1','184-2'];
var barChartData = {
labels : orders,
datasets : [
{
label: "Order",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data : [6,randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),5,6]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
// Notice now we're extending the particular Bar chart type, rather than the base class.
Chart.types.Bar.extend({
// Passing in a name registers this chart in the Chart namespace in the same way
name: "BarAlt",
initialize: function(data){
console.log('Bar chart extension to add red line');
Chart.types.Bar.prototype.initialize.apply(this, arguments);
},
draw: function() {
Chart.types.Bar.prototype.draw.apply(this, arguments);
this.chart.ctx.beginPath();
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(25, 50);
this.chart.ctx.lineTo(1000,50);
this.chart.ctx.strokeStyle="red";
this.chart.ctx.stroke();
}
});
var chart = new Chart(ctx).BarAlt(barChartData, {
responsive : true,
animation: true,
barValueSpacing : 5,
barDatasetSpacing : 1,
tooltipFillColor: "rgba(0,0,0,0.8)",
// multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
tooltipTemplate: function(valuesObject){
console.log(valuesObject);
// do different things here based on whatever you want;
var label = valuesObject.label
var objLen = label.length;
// 111-1
var string = label.substring(0,objLen-2);
console.log(string);
return "Order nr: " + string;
}
});
}
</script>
</body>
</html>关于javascript - 在 Chart.js 栏上画线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35576797/
32
4
0
我对java Graphics不熟悉，我想在3个按钮上画一条线。我找到了一些绘制线条的方法，但没有一个将其绘制在按钮顶部。 这是我的 GUI 类 public class GUI extends JF
我正在尝试画线。 int main(int argc, char *argv[]) { QApplication a(argc, argv); MainWindow w; w.
我目前正在尝试在 BabylonJS 中跟踪对象的路径。 为此，我想在现有位置和以前的位置之间画一条线。 我能得到的最接近的是一个立方体。 var plane = BABYLON.Mesh.Creat
我正在尝试绘制一棵递归树，但我已经卡在了开头。一段时间以来，我一直在尝试解决这个问题，但似乎无法解决。 我正在使用 StdDraw 库。这就是我想做的: 我已经画好了树干(黑线)。但我也需要画红线。
在我之前的问题中 For Loop Functions in Python ,我在放置包含为刽子手游戏划线的命令的函数时遇到了麻烦。它并没有完全划清界线，我首先怀疑这是 for 循环或函数的问题。现在
我有一个自定义布局，可以根据触摸输入画一条线。我让它画了线，但是当用户触摸屏幕时，线消失了，它画了一条新线。我想要它做的是画一条新线并将上一条线留在那里。这是我的代码: import andr
我想使用触摸监听器在屏幕上画一条线，但是当我再次尝试画线时，它会删除上一条线。我正在使用这段代码:- 我无法找到问题的解决方案。 public class Drawer extends View
我已经阅读了一堆涉及 XNA(以及它的各种版本)的教程，但我仍然对绘制原语感到有些困惑。一切似乎真的很复杂。 有人可以使用代码向我展示在屏幕上绘制一两行的最简单的 XNA 实现吗？也许有一个简短的解释
我是 Objective C 的初学者，我试图用 Paint 风格制作一个程序，我正在用平移手势画一条线。我可以做出手势，但问题是我无法在我用鼠标经过的地方画图，每次它重新加载我之前删除的那个点时。帮
如何使用 SVG 绘制连接 2 个图像的线？。例如我想画一条线连接 $1 和 $2(假设 $1 和 $2 是图像): $1 $2 是否需要 Javascript？ 谢谢! 最佳答案 您可以轻松
我在创建此代码时遇到问题。我遇到的问题是，当我单击以停止绘制线条时，它有 50% 的机会第一次工作但是如果你只做直线，它似乎只能正常工作，但我希望它从任何方向工作，我不是 100% 确定为什么它不工作
我想在我的 TextView 中的数字/字母之间绘制垂直线。所以它看起来应该类似于 A|B|C|D 不使用 | 字符，而是使用 drawLine()。 我正在尝试使用 TextView 的宽度来做到这
我刚刚开始使用 AWT 来使用 GUI。框架正在打开，但线路未显示。 import java.awt.*; import java.awt.event.*; class A extends Frame
我可以使用 CGContext 绘制线条。如何使用 UIView 绘制具有相同坐标的线？以后想移动线条，需要用到UIView。 func DrawLine() { UIGraphicsBegi
请在此处查看我的代码 http://jsbin.com/ijoxa3/edit var drawHorizondalLine = function(x1,y1,x2,y2, color) {
IE9 Canvas 现在支持虚线吗？目前我正在做一些与以下非常相似的事情: var CP = window.CanvasRenderingContext2D && CanvasRenderingCo
我有一个程序，我正试图在一个小部件上画一条线。这是我的代码: 标题: #include #include class DrawingWidget : public QWidget{ Q_O
基于此question ，我写了这个 jsfiddle ，我想补充两点。问题可能是点位于六边形内。 这是 HTML:
我正在尝试从一个对象到目标对象画一条线。我设法做到了这一点，但是线条是从中心绘制的 我想做的是在目标上绘制从平面边缘到平面边缘的线 在此图像中，白线是当前绘制的连接，红线是我希望绘制线的方式 现在线条
如何添加线条，就像我在 Paint 中使用 ILNumerics 绘制一样？我的场景正在使用该代码构建: ilPanel1.Scene = new ILScene() { new ILP
我是一名优秀的程序员,十分优秀！