Chart.js — 绘制任意垂直线
Posted
技术标签:
【中文标题】Chart.js — 绘制任意垂直线【英文标题】:Chart.js — drawing an arbitrary vertical line 【发布时间】:2015-07-27 05:05:52 【问题描述】:如何使用 Chart.js 在 x 轴上的特定点绘制垂直线?
特别是,我想在 LineChart 上画一条线来表示当前日期。这是图表的模型: http://i.stack.imgur.com/VQDWR.png
【问题讨论】:
【参考方案1】:更新 - 此答案适用于 Chart.js 1.x,如果您正在寻找 2.x 答案,请检查 cmets 和其他答案。
您扩展折线图并在绘图函数中包含用于绘制线条的逻辑。
预览
HTML
<div>
<canvas id="LineWithLine" ></canvas>
</div>
脚本
var data =
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
]
;
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend(
name: "LineWithLine",
draw: function ()
Chart.types.Line.prototype.draw.apply(this, arguments);
var point = this.datasets[0].points[this.options.lineAtIndex]
var scale = this.scale
// draw line
this.chart.ctx.beginPath();
this.chart.ctx.moveTo(point.x, scale.startPoint + 24);
this.chart.ctx.strokeStyle = '#ff0000';
this.chart.ctx.lineTo(point.x, scale.endPoint);
this.chart.ctx.stroke();
// write TODAY
this.chart.ctx.textAlign = 'center';
this.chart.ctx.fillText("TODAY", point.x, scale.startPoint + 12);
);
new Chart(ctx).LineWithLine(data,
datasetFill : false,
lineAtIndex: 2
);
选项属性 lineAtIndex 控制在哪个点画线。
小提琴 - http://jsfiddle.net/dbyze2ga/14/
【讨论】:
谢谢@potatopeelings,这正是我想要的。我没有足够的代表来支持你,但如果可以的话,我显然会。 谢谢!整洁简单:) @Sheetal - 不太明白。您可能想发布您正在寻找的图像。干杯!此外,新版 Chart.js (v2.1.x) 现已发布。以上答案适用于 v1.x 这是一个不错的解决方案。您可以为图表 js 版本 2.1.6 更新此内容吗? @ArunSS Solution for Chart.js 2.0【参考方案2】:分享我的 chartjs.org 2.5 版解决方案。我想使用一个插件,使实现可重用。
const verticalLinePlugin =
getLinePosition: function (chart, pointIndex)
const meta = chart.getDatasetMeta(0); // first dataset is used to discover X coordinate of a point
const data = meta.data;
return data[pointIndex]._model.x;
,
renderVerticalLine: function (chartInstance, pointIndex)
const lineLeftOffset = this.getLinePosition(chartInstance, pointIndex);
const scale = chartInstance.scales['y-axis-0'];
const context = chartInstance.chart.ctx;
// render vertical line
context.beginPath();
context.strokeStyle = '#ff0000';
context.moveTo(lineLeftOffset, scale.top);
context.lineTo(lineLeftOffset, scale.bottom);
context.stroke();
// write label
context.fillStyle = "#ff0000";
context.textAlign = 'center';
context.fillText('MY TEXT', lineLeftOffset, (scale.bottom - scale.top) / 2 + scale.top);
,
afterDatasetsDraw: function (chart, easing)
if (chart.config.lineAtIndex)
chart.config.lineAtIndex.forEach(pointIndex => this.renderVerticalLine(chart, pointIndex));
;
Chart.plugins.register(verticalLinePlugin);
那么使用就很简单了:
new Chart(ctx,
type: 'line',
data: data,
label: 'Progress',
options: options,
lineAtIndex: [2,4,8],
)
上面的代码在位置 2,4 和 8 插入红色垂直线,穿过这些位置的第一个数据集的点。
【讨论】:
这太棒了,而且可重复使用!很好的解决方案! +1 恢复这个旧帖子,但是可以为每个垂直行配置不同的文本吗? 当然,您只需稍微调整一下即可。您应该提供一个带有 index=>text 的地图,而不是 lineAtIndex 数组,在 afterDatasetsDraw 方法中对其进行迭代,并在当前呈现“MY TEXT”的 renderVerticalLine 方法中使用地图中的文本。 Chart.js 现在可能有一些错误导致 ReferenceError "Chart is not defined" 虽然我赞成这个解决方案,但它确实有一个非常难看的限制,因为无法在位于索引之间的值处添加行。但事实证明这是一个很棒的教程。【参考方案3】:我不得不费力地弄清楚如何用 ChartJS 2.0 做类似的事情,所以我想我会分享。
这是基于覆盖图表原型的新方法,如下所述:https://github.com/chartjs/Chart.js/issues/2321
var ctx = document.getElementById('income-chart');
var originalDraw = Chart.controllers.line.prototype.draw;
Chart.controllers.line.prototype.draw = function (ease)
originalDraw.call(this, ease);
var point = dataValues[vm.incomeCentile];
var scale = this.chart.scales['x-axis-0'];
// calculate the portion of the axis and multiply by total axis width
var left = (point.x / scale.end * (scale.right - scale.left));
// draw line
this.chart.chart.ctx.beginPath();
this.chart.chart.ctx.strokeStyle = '#ff0000';
this.chart.chart.ctx.moveTo(scale.left + left, 0);
this.chart.chart.ctx.lineTo(scale.left + left, 1000000);
this.chart.chart.ctx.stroke();
// write label
this.chart.chart.ctx.textAlign = 'center';
this.chart.chart.ctx.fillText('YOU', scale.left + left, 200);
;
【讨论】:
【参考方案4】:我强烈建议使用Chartjs-Plugin-Annotation。
一个例子可以在CodePen找到
var chartData =
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
]
;
window.onload = function()
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx,
type: "line",
data: chartData,
options:
annotation:
annotations: [
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: "MAR",
borderColor: "red",
label:
content: "TODAY",
enabled: true,
position: "top"
]
);
;
查看这里了解更多详情:https://***.com/a/36431041
【讨论】:
它对我有用 - 如果没有任何进一步的信息,我将无法为您提供帮助 我正在尝试将它添加到 Ionic 项目移动中。您是为网络创建的吗? 是的,我为一个网站创建了它。也许您应该创建一个单独的问题,其中包含有关您的实际问题的更多信息并提供一些源代码。 已解决,谢谢! ***.com/questions/47655173/… 所有 chart.js 插件都很乱。这可以解释为什么它们是«插件»而不包含在核心中。这需要经过大量测试。 Chart.js 可以,但不要使用插件,伙计们,自己做吧。【参考方案5】:这是一支无需使用 chartjs-plugin-annotation 或破解 Chart.js 呈现方式或任何其他插件即可实现类似效果的笔:https://codepen.io/gkemmey/pen/qBWZbYM
方法
-
使用组合条形图/折线图,并使用条形图绘制垂直线。
使用两个 y 轴:一个用于条形图(我们不显示),一个用于所有其他折线图数据集。
将条形图的 y 轴强制设置为
min: 0
和 max: 1
。每当您想绘制垂直线时,请将 x: where_the_line_goes, y: 1
之类的数据对象添加到您的条形图数据集中。
笔还添加了一些自定义数据到条形图数据集和一个图例过滤器和标签回调以从图例中排除条形图数据集,并控制垂直线上的标签。
优点
-
没有其他依赖项。没有自定义猴子修补/扩展。
注解插件似乎没有得到积极维护。例如,atm,他们的事件处理程序抛出一个关于“防止被动事件默认”的错误
也许是专业人士:注解插件总是显示绘制线条的标签,您必须使用它们的事件回调来获得悬停时显示效果。 Chart.js 工具提示默认在悬停时显示。
缺点
-
我们正在数据集配置中添加自定义数据,并希望它不会与 Chart.js 所做的任何事情发生冲突。这是 Chart.js 不希望存在的数据,但从 2.8 开始,也不会破坏它。
【讨论】:
如果我们能找到一种方法为条形图应用线性轴,这种方法将是完美的,添加冗余数据以显示图表并不是我所期望的以上是关于Chart.js — 绘制任意垂直线的主要内容,如果未能解决你的问题,请参考以下文章
Chart.js 数据数组使用 PHP、MySQL。如何从 JSON 数组定义数据源?
从 php 循环中绘制多个图表(Chart.js)以读取多个文件