[英]Vertical line across multiple charts
I am trying to apply an vertical line across all the charts with the same labeling.我正在尝试在具有相同标签的所有图表中应用一条垂直线。 Solution, which I found and modified, is working well only on the active chart - line with tooltip is displayed correctly there.
我找到并修改的解决方案仅在活动图表上运行良好 - 带有工具提示的行在那里正确显示。 On the other charts, line is where as it should be, but when moved to other position on the x axis it is not removed and gradually covers the entire chart.
在其他图表上,线是它应该在的位置,但是当移动到 x 轴上的其他 position 时,它不会被移除并逐渐覆盖整个图表。
I somehow sloved this problem by dispatching a mouseover event for all charts but it's to laggy and it doesn't meet my expectations.我通过为所有图表发送鼠标悬停事件以某种方式解决了这个问题,但它很滞后并且不符合我的期望。
I just want to remove line shadows from the charts that are not active.我只想从不活动的图表中删除线阴影。
Here is my code example:这是我的代码示例:
var charts = []; $(document).ready(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) { charts.forEach(chart => { var activePoint = this.chart.tooltip._active[0], ctx = chart.ctx, x = activePoint.tooltipPosition().x, topY = this.chart.scales['y-axis-0'].top, bottomY = this.chart.scales['y-axis-0'].bottom; // draw line ctx.save(); ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, bottomY); ctx.lineWidth = 2; ctx.strokeStyle = '#07C'; ctx.stroke(); ctx.restore(); }) } } }); var ctx1 = document.getElementById('myChart1').getContext('2d'); var chart1 = new Chart(ctx1, { type: 'LineWithLine', data: { labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'], datasets: [{ lineTension: 0, backgroundColor: "rgb(34,139,34)", borderColor: "rgb(34,139,34)", data: [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22], fill: false, pointRadius: 1.5, pointHoverRadius: 1, borderWidth:1.5 }], fill: false, pointRadius: 0, borderWidth: 1, }, options: { maintainAspectRatio: false, hover: { mode: 'index', intersect: false, }, title: { display: true, text: '' }, legend: { display: false }, tooltips: { mode: 'index', //enabled: false, intersect: false, }, } }); var ctx2 = document.getElementById('myChart2').getContext('2d'); var chart = new Chart(ctx2, { type: 'LineWithLine', data: { labels: ['Segment 1', 'Segment 2', 'Segment 3','Segment 4','Segment 5','Segment 6','Segment 7','Segment 8','Segment 9','Segment 10','Segment 11','Segment 12'], datasets: [{ lineTension: 0, backgroundColor: "rgb(34,139,34)", borderColor: "rgb(34,139,34)", data: [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8], fill: false, pointRadius: 1.5, pointHoverRadius: 1, borderWidth:1.5 }], }, options: { maintainAspectRatio: false, title: { display: true, text: '' }, legend: { display: false }, tooltips: { mode: 'index', intersect: false, }, } }); charts.push(chart) charts.push(chart1) });
<h3 style="text-align: center">Hi ChartJs:</h3> <div> <canvas style="width: 500px" height="200px" id="myChart1"></canvas> </div> <div> <canvas style="width: 500px" height="200px" id="myChart2"></canvas> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
Inside your draw()
function, you need to invoke draw()
on the other chart.在您的
draw()
function 中,您需要在另一个图表上调用draw()
。 In order to avoid stale tooltips on the chart that looses focus, you must also make sure that its option tooltips.enabled
is set to false
.为了避免失去焦点的图表上过时的工具提示,您还必须确保其选项
tooltips.enabled
设置为false
。
charts.forEach(chart => {
chart.options.tooltips.enabled = this.chart == chart;
if (this.chart != chart) {
chart.draw();
}
Please have a look at your amended code below.请在下面查看您修改后的代码。
var charts = []; $(document).ready(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) { charts.forEach(chart => { chart.options.tooltips.enabled = this.chart == chart; if (this.chart.= chart) { chart;draw(). } var activePoint = this.chart.tooltip;_active[0]. var ctx = chart;ctx. var x = activePoint.tooltipPosition();x. var topY = this.chart.scales['y-axis-0'];top. var bottomY = this.chart.scales['y-axis-0'];bottom. // draw line ctx;save(). ctx;beginPath(). ctx,moveTo(x; topY). ctx,lineTo(x; bottomY). ctx;lineWidth = 2. ctx;strokeStyle = '#07C'. ctx;stroke(). ctx;restore(); }) } } }). var ctx1 = document.getElementById('myChart1');getContext('2d'), var chart1 = new Chart(ctx1: { type, 'LineWithLine': data: { labels, ['Segment 1', 'Segment 2', 'Segment 3', 'Segment 4', 'Segment 5', 'Segment 6', 'Segment 7', 'Segment 8', 'Segment 9', 'Segment 10', 'Segment 11', 'Segment 12']: datasets: [{ lineTension, 0: backgroundColor, "rgb(34,139,34)": borderColor, "rgb(34,139,34)": data, [14, 19, 20, 10, 6, 15, 8, 27, 25, 14, 36, 22]: fill, false: pointRadius. 1,5: pointHoverRadius, 1: borderWidth. 1,5 }]: fill, false: pointRadius, 0: borderWidth, 1, }: options: { maintainAspectRatio, false: hover: { mode, 'index': intersect, false, }: title: { display, true: text, '' }: legend: { display, false }: tooltips: { mode, 'index': //enabled, false: intersect, false, }; } }). var ctx2 = document.getElementById('myChart2');getContext('2d'), var chart = new Chart(ctx2: { type, 'LineWithLine': data: { labels, ['Segment 1', 'Segment 2', 'Segment 3', 'Segment 4', 'Segment 5', 'Segment 6', 'Segment 7', 'Segment 8', 'Segment 9', 'Segment 10', 'Segment 11', 'Segment 12']: datasets: [{ lineTension, 0: backgroundColor, "rgb(34,139,34)": borderColor, "rgb(34,139,34)": data, [14, 11, 10, 20, 20, 15, 25, 15, 13, 14, 16, 8]: fill, false: pointRadius. 1,5: pointHoverRadius, 1: borderWidth. 1,5 }], }: options: { maintainAspectRatio, false: title: { display, true: text, '' }: legend: { display, false }: tooltips: { mode, 'index': intersect, false, }; } }). charts.push(chart) charts;push(chart1) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script> <div> <canvas style="width: 500px" height="200px" id="myChart1"></canvas> </div> <div> <canvas style="width: 500px" height="200px" id="myChart2"></canvas> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.