- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在创建折线图时,我遇到了图表 js 的问题。我想用指定的数据创建一个图表,并且在我将鼠标悬停在交点上时还需要有水平线和垂直线。我能够在悬停时创建垂直线,但找不到任何可以绘制两条线的解决方案。这是我在悬停时绘制垂直线的代码。
window.lineOnHover = function(){
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
topY = this.chart.legend.bottom,
bottomY = this.chart.chartArea.bottom;
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.lineWidth = 1;
ctx.setLineDash([3,3]);
ctx.strokeStyle = '#FF4949';
ctx.stroke();
ctx.restore();
}
}
});
}
//create chart
var backhaul_wan_mos_chart = new Chart(backhaul_wan_mos_chart, {
type: 'LineWithLine',
data: {
labels: ['Aug 1', 'Aug 2', 'Aug 3', 'Aug 4', 'Aug 5', 'Aug 6', 'Aug 7', 'Aug 8'],
datasets: [{
label: 'Series 1',
data: [15, 16, 17, 18, 16, 18, 17, 14, 19, 16, 15, 15, 17],
pointRadius: 0,
fill: false,
borderDash: [3, 3],
borderColor: '#0F1731',
// backgroundColor: '#FF9CE9',
// pointBackgroundColor: ['#FB7BDF'],
borderWidth: 1
}],
// lineAtIndex: 2,
},
options: {
tooltips: {
intersect: false
},
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
offsetGridLines: true
},
ticks: {
fontColor: '#878B98',
fontStyle: "600",
fontSize: 10,
fontFamily: "Poppins"
}
}],
yAxes: [{
display: true,
stacked: true,
ticks: {
min: 0,
max: 50,
stepSize: 10,
fontColor: '#878B98',
fontStyle: "500",
fontSize: 10,
fontFamily: "Poppins"
}
}]
},
responsive: true,
}
});
我的代码输出如下
WAN MoS 分数图 --
最佳答案
您可以为从工具提示中获得的 y 坐标添加第二个绘图 block ,首先您移动到 chartArea 的左侧,您可以获得与底部和顶部相同的方式,然后在相同的位置向右移动是的
Chart.defaults.LineWithLine = Chart.defaults.line;
Chart.controllers.LineWithLine = Chart.controllers.line.extend({
draw: function(ease) {
Chart.controllers.line.prototype.draw.call(this, ease);
if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
var activePoint = this.chart.tooltip._active[0],
ctx = this.chart.ctx,
x = activePoint.tooltipPosition().x,
y = activePoint.tooltipPosition().y,
topY = this.chart.legend.bottom,
bottomY = this.chart.chartArea.bottom,
left = this.chart.chartArea.left,
right = this.chart.chartArea.right;
// Set line opts
ctx.save();
ctx.lineWidth = 1;
ctx.setLineDash([3, 3]);
ctx.strokeStyle = '#FF4949';
// draw vertical line
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x, bottomY);
ctx.stroke();
// Draw horizontal line
ctx.beginPath();
ctx.moveTo(left, y);
ctx.lineTo(right, y);
ctx.stroke();
ctx.restore();
}
}
});
var options = {
type: 'LineWithLine',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
corsair: {
dash: [2, 2],
color: 'red',
width: 3
}
}
},
plugins: [{
id: 'corsair',
afterInit: (chart) => {
chart.corsair = {
x: 0,
y: 0
}
},
afterEvent: (chart, evt) => {
const {
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
x,
y
} = evt;
if (x < left || x > right || y < top || y > bottom) {
chart.corsair = {
x,
y,
draw: false
}
chart.draw();
return;
}
chart.corsair = {
x,
y,
draw: true
}
chart.draw();
},
afterDatasetsDraw: (chart, _, opts) => {
const {
ctx,
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
x,
y,
draw
} = chart.corsair;
if (!draw) {
return;
}
ctx.lineWidth = opts.width || 0;
ctx.setLineDash(opts.dash || []);
ctx.strokeStyle = opts.color || 'black'
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottom);
ctx.lineTo(x, top);
ctx.moveTo(left, y);
ctx.lineTo(right, y);
ctx.stroke();
ctx.restore();
}
}]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
const options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
plugins: {
corsair: {
dash: [2, 2],
color: 'red',
width: 3
}
}
},
plugins: [{
id: 'corsair',
afterInit: (chart) => {
chart.corsair = {
x: 0,
y: 0
}
},
afterEvent: (chart, evt) => {
const {
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
event: {
x,
y
}
} = evt;
if (x < left || x > right || y < top || y > bottom) {
chart.corsair = {
x,
y,
draw: false
}
chart.draw();
return;
}
chart.corsair = {
x,
y,
draw: true
}
chart.draw();
},
afterDatasetsDraw: (chart, _, opts) => {
const {
ctx,
chartArea: {
top,
bottom,
left,
right
}
} = chart;
const {
x,
y,
draw
} = chart.corsair;
if (!draw) {
return;
}
ctx.lineWidth = opts.width || 0;
ctx.setLineDash(opts.dash || []);
ctx.strokeStyle = opts.color || 'black'
ctx.save();
ctx.beginPath();
ctx.moveTo(x, bottom);
ctx.lineTo(x, top);
ctx.moveTo(left, y);
ctx.lineTo(right, y);
ctx.stroke();
ctx.restore();
}
}]
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>
关于javascript - 在图表js中鼠标悬停绘制水平和垂直线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70112637/
我想在80个字符处添加一个标尺。我知道您可以add rulers to CodeMirror,但是我不知道是否应该将the corresponding javascript放在文件中的某个位置,或者放
我正在使用plotly包,并尝试向图形添加水平线。有什么办法使用plotly吗? 可以使用ggplot2和ggplotly函数完成此操作,如下所示: library(plotly) p % add
我想在 org.eclipse.xtext.ui.editor.embedded.EmbeddedEditor 中的 120 个字符后显示一条垂直线(Eclipse 措辞中的打印边距)。这是否以某种方
我的想法是制作一个几乎像 Lollipop 一样的圆圈(在我的例子中是一个矩形)的底部有一条无限长的垂直线。我读到这可以使用 css :after 来完成,但是 psuedoelements 确实限制
我正在尝试使用 Bootstrap 在中间设置一 strip 有按钮的垂直线。 使用Bootstrap简单竖线:
我想知道如何用一条直线连接两个 div 元素,这条直线的距离有点像本网站中的那条线: JSFiddle link: https://jsfiddle.net/mcbvb8m2/ 对于水平和垂直 div
我有一个数字类型的输入,我应该将输入的值格式化为返回字符串的特定格式,因此作为解决方案,我添加了第二个字符串类型的输入并隐藏了输入 [type=number] 但用户只看到输入 [type=strin
我正在尝试创建一个教育时间表。应该有一条垂直线(红色)从“毕业帽”后面开始,然后穿过所有时间线后(绿色)。 这是我到目前为止得到的: .iconspace { position: relati
对于给定的矩形 R1 我试图找出哪些是可以与其相交的其他矩形 IF 我画了一个 vector 线段。 与 R1 相交的矩形标记为红色。 每个矩形都由其(top, left) 和(bottom, rig
我想知道是否可以激活悬停在图形上方的垂直线并突出显示点? 例如,在此图中:http://www.highcharts.com/stock/demo/compare ->将鼠标悬停在图形线上时,每个系列
我需要在我的图文上放置一 strip 有标签的垂直线,例如本例中的国庆节线 - http://www.fusioncharts.com/dev/chart-attributes.html?chart=
IE11不支持播放作品音频文件。这就是为什么我使用 ogv.js javascript库在IE11中播放它的原因。该库将音频数据流传输到IE11的内部Flash Player并进行播放。问题是在并行播
我在 android 中使用 achartengine 图形库制作折线图。有人可以建议我放置十字准线(当用户触摸图表时在所有数据点上移动的垂直线)我的要求符合这样的实现 http://www.jqch
我正在为子菜单项制作 TreeView ,我快完成了。最后一个元素的问题,现在看起来如何: 我想看起来像: DEMO HTML: Example 1
如何像此处那样在我的网页边框周围创建边框? http://www.callieschweitzer.com/ 我尝试做一条水平线,但很难将其与垂直线对齐……不过我觉得有一种更简单的方法。有什么想法吗?
这个问题在这里已经有了答案: What does the vertical pipe ( | ) mean in C++? (4 个答案) 关闭 5 年前。 我用了双竖“||”作为 bool “或”
我使用 Pandoc (http://johnmacfarlane.net/pandoc/README.html) 及其 Markdown 处理器。当我使用 Pandoc 将下面的网格转换为 PDF(
谁能告诉我如何扩展 Chart.js v2.0。我需要折线图中的垂直线,我想实现类似于 http://jsfiddle.net/dbyze2ga/ 的东西. Chart.types.Line.exte
我已经创建了一个自定义通知 XML 文件。我想画一条垂直线,就像下图中的水平线一样。我一直在尝试各种方法无法实现它。 xml 中从水平到垂直的方向对我没有帮助。 查看下面的屏幕截图:我想要垂直线而不是
如何使用标准图像处理过滤器(来自 OpenCV)从图像中去除长水平和垂直线? 图像是黑白的,所以删除意味着简单地涂成黑色。 插图: 我目前正在用 Python 执行此操作,遍历像素行和列并检测连续像素
我是一名优秀的程序员,十分优秀!