如何使用图表绘制水平线.js 3.x？无法使其正常工作
目标
我想在我的html页面中使用Chart.js 3.x通过CDN集成创建一个由三条水平线组成的图形，覆盖我的实际数据集行。
因此，我没有自己的Chart.js安装，而是使用CDNs。到目前为止，我以这种方式使用最新的Chart.js 3.x测试版没有遇到任何问题。
重要提示：由于我需要它的一些附加测试功能，我无法恢复到稳定图表。JS2.x。
预期结果
这就是相似的情况。
实际结果
使用图表根据数据集创建实际的折线图没有问题。js版本3.0.0-beta.6。如果您对JavaScript Fiddle部分的第64行进行注释，您将看到基本图形正在工作。
但是，不幸的是，我无法绘制水平线！
到目前为止我所尝试的
Jsfiddle -不工作的尝试
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.6/chart.js"></script>
<style>
.container{
position: relative;
width: 50vw;
}
</style>
</head>
<body>
<canvas id="myChart" class="container"></canvas>
<script>
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var horizonalLinePlugin = {
id: 'horizontalLine',
afterDraw: function(chartInstance) {
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
}
}
};
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "MyDataset01",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: [65, 59, 80, 81, 56, 55, 40],
}]
};
//When uncommenting below line, graph is created without horizontal lines
Chart.register(horizonalLinePlugin);
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalLine": [{
"y": 75.8,
"style": "#ff0000",
"text": "upper-limit"
}, {
"y": 62.3,
"style": "#00ff00",
"text": "avg"
}, {
"y": 48.8,
"style": "#0000ff",
"text": "lower-limit"
}]
}
});
</script>
我阅读了图表的文档。js和chartjs注释插件的工作示例-但不幸的是，它们都只基于图表。js版本2.x。
我在短期内尝试将CDNs https://cdnjs . cloud flare . com/Ajax/libs/chart . js/3 . 0 . 0-beta . 6/chart . js和https://cdnjs . cloud flare . com/Ajax/libs/chart js-plugin-annotation/0 . 5 . 7/chart js-plugin-annotation . js放在一起使用，但未能成功。没有找到任何工作的例子，如小提琴。
现在，我尝试使用一个内嵌的Chart.js插件，但没有成功，得到错误信息
Fiddle的JavaScript部分第8行：“#55:15 TypeError：画布未定义”
共有2个答案
在使用chartjs 3.0时，我遇到了同样的问题
var horizonalLinePlugin = {
id : 'horizontalLine',
afterDraw: function (chartInstance) {
// var yScale = chartInstance.scales["y-axis-0"];
var yScale = chartInstance.scales['y'];
// var canvas = chartInstance.chart;
var canvas = chartInstance.canvas;
var ctx = chartInstance.ctx;
var index;
var line;
var style;
var yValue;
if (chartInstance.config._config.options.horizontalLine) {
for (index = 0; index < chartInstance.config._config.options.horizontalLine.length; index++) {
line = chartInstance.config._config.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(20, yValue);
// ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
};
}
};
Chart.register(horizonalLinePlugin);
chartInstance.chart 未定义。不确定是不是迁移问题要图表.js版本3.0...
尝试以下操作：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.6/chart.js"></script>
<style>
.container{
position: relative;
width: 50vw;
}
</style>
</head>
<body>
<canvas id="myChart" class="container"></canvas>
<script>
var canvas = document.getElementById("myChart");
var ctx = canvas.getContext("2d");
var horizonalLinePlugin = {
id: 'horizontalLine',
afterDraw: function(chartInstance) {
var yScale = chartInstance.scales["y"];
// chartInstance.chart is undefined
//var canvas = chartInstance.chart;
// console.log(canvas);
// var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
}
}
};
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "MyDataset01",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
data: [65, 59, 80, 81, 56, 55, 40],
},
]
};
//When uncommenting below line, graph is created without horizontal lines
Chart.register(horizonalLinePlugin);
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
"horizontalLine": [{
"y": 75.8,
"style": "#ff0000",
"text": "upper-limit"
}, {
"y": 62.3,
"style": "#00ff00",
"text": "avg"
}, {
"y": 48.8,
"style": "#0000ff",
"text": "lower-limit"
}],
}
});
</script>
下面是上面Jsfiddle中的代码——working！
-
问题内容： 我已经使用样条插值法来平滑时间序列，并且还想在绘图中添加一条水平线。但是似乎有一个我无法控制的问题。任何帮助都会非常有帮助。这是我所拥有的： 问题似乎与我对水平线图的使用有关。 问题答案： 您是正确的，我认为这使您失望。您将要重用原始的x轴变量，并使用另一个包含变量的相同长度的numpy数组对其进行绘制。 希望可以解决问题！
-
我使用样条插值来平滑时间序列，还想在图中添加一条水平线。但是似乎有一个问题超出了我的控制范围。任何帮助都会很有帮助。这是我所拥有的： 问题似乎在于我使用进行水平线绘制。
-
可以帮我弄清楚怎么用matplotlib画这种图吗？ 我有一个熊猫数据框对象来表示这个表: 我想可视化每个< code >图形的< code>n和< code>m的大小:一个水平条形图，其中每一行在y轴的左侧都有一个包含< code >图形名称的标签；在y轴的右边，有两个细的水平条，一个在另一个的正下方，其长度代表< code>n和< code>m。应该可以清楚地看到，两个细条都属于标有图形名称的
-
问题内容： 我已经建立了俄罗斯方块游戏。现在，我已经使用JPanel来显示内容和块（使用paintComponents（）方法）。 问题是，当我尝试从另一个JFrame调用tetris程序时，它根本无法绘制。 我的俄罗斯方块主菜单的代码是： 当调用MatrixBoard的构造函数时，俄罗斯方块游戏会在新窗口中开始。但是，这些块在屏幕上不可见。MatrixBoard的代码是： 请帮忙。我怀疑问题出在
-
我正试着做一个水平条形图。我在左轴上总共有24个标签。我在绘制条形图时面临几个问题: 1）条形图开始时，我显示的条目数量有限。用户可以滚动以查看其他条目。正如您在图1中看到的，一个条形图出现在Y轴的“下方”。我无法弄清楚如何将所有条形图保持在轴的顶部。 2）第二个问题是值（或条形图）向下移动了1。“00 AM”标签前面没有条形图，但在11 AM的最后一个条目下方有一个额外的条形图，如第二张图片所示
-
有人知道如何在甘特图中的特定位置移动/绘制虚线吗？例如，我有这样的图表： 链接到图像 很难看到任务1和任务2以及任务3在哪里。 如果可能的话，画水平线不是在1,2,3线，而是在整个系列之后，以明确视觉分隔符。 谢谢