ChartJs-设置刻度线之间的空间的背景色

本文介绍了ChartJs-设置刻度线之间的空间的背景色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 我需要设置刻度背景颜色之间的偶数/奇数空间，如下图所示； 关于如何在图表js中实现类似功能的任何想法？ 我还在这里找到了一个几乎不错的解决方案： http://jsfiddle.net/e7oy6yk6/2 1）HTML代码： < canvas id = myChart>< / canvas> 2）Javascript代码： Chart.pluginService.register（{ beforeDraw：function（chart，easing）{ if（chart.config.options.chartArea&&&&&&&char; .chartArea.backgroundColor）{ var helpers = Chart.helpers; var ctx = chart.chart.ctx; var chartArea = chart.chartArea; var columnCount = chart.data.datasets [0] .data.length; var width = chartArea.right-chartArea.left; var height = chartArea.bottom-chartArea.top var columnWidth = width / columnCount; ctx.save（）; ctx.fillStyle = chart.config.options.chartArea.backgroundColor; var startPoint = chartArea.left for（var i = 1; i< width / 2; i ++）{ ctx.fillRect（startPoint，chartArea.top，columnWidth，height）; startPoint + =列nWidth * 2; } ctx.restore（）; } } }）； var config = {类型：'line'，数据：{标签：[一月，二月，三月，四月， May， June， July]，数据集：[{标签：我的第一个数据集，数据：[65、0、80、81， 56，85，40]，填充：false }] }，选项：{ chartArea：{ backgroundColor：'rgba（251 ，85，85，0.4）'} } }; var ctx = document.getElementById（ myChart）。getContext（ 2d）; 新图表（ctx，config）; 谢谢。解决方案您需要改编自己的示例以使用高度而不是宽度。 我只是更改了属性和坐标以绘制矩形即可使用。 http://jsfiddle.net/e7oy6yk6/170/ Chart.pluginService.register（{ beforeDraw：function（chart，easing）{ if（chart.config.options。 chartArea& amp; chart.config.options.chartArea.backgroundColor）{ var helpers = Chart.helpers; var ctx = chart.chart.ctx; var chartArea = chart.chartArea ; var values = chart.data.datasets [0] .data; //添加了 // var columnCount = chart.data.datasets [0] .data.length; var rowCount = Math.ceil（Math.max.apply（null，values）/ 10）; //替换为所需的行数 var width = chartArea.right-chartArea。左; var height = chartArea.bottom- chartArea.top // var columnWidth = width / columnCount; var rowHeight =高度/ rowCount; //添加了 ctx.save（）; ctx.fillStyle = chart.config.options.chartArea.backgroundColor; var startPoint = chartArea.top //更改了而（startPoint< chartArea.bottom）{//更改了 ctx.fillRect（chartArea.left，startPoint，width，rowHeight）; //更改订单 startPoint + = rowHeight * 2; //更改了} ctx.restore（）; } } }）； var config = {类型：'line'，数据：{标签：[一月，二月，三月，四月， May， June， July]，数据集：[{标签：我的第一个数据集，数据：[65、0、80、81， 56，85，40]，填充：false }] }，选项：{ chartArea：{ backgroundColor：'rgba（251 ，85，85，0.4）'} } }; var ctx = document.getElementById（ myChart）。getContext（ 2d）; 新图表（ctx，config）; I need to set the even/odd space between the ticks background color just like in the following image;See the "Interlaced Colors" background color. I need to do this for both vertical and horizontal graphs.See for example: https://canvasjs.com/docs/charts/chart-options/axisY/interlacedcolor/Any idea on how can I implement something similar in chart js?I also found an almost good solution here: http://jsfiddle.net/e7oy6yk6/21) HTML code:<canvas id="myChart"></canvas>2) Javascript code: Chart.pluginService.register({ beforeDraw: function (chart, easing) { if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) { var helpers = Chart.helpers; var ctx = chart.chart.ctx; var chartArea = chart.chartArea; var columnCount = chart.data.datasets[0].data.length; var width = chartArea.right - chartArea.left; var height = chartArea.bottom - chartArea.top var columnWidth = width/columnCount; ctx.save(); ctx.fillStyle = chart.config.options.chartArea.backgroundColor; var startPoint = chartArea.left for (var i = 1; i < width/2; i++) { ctx.fillRect(startPoint, chartArea.top, columnWidth, height); startPoint += columnWidth * 2; } ctx.restore(); } } }); var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: [65, 0, 80, 81, 56, 85, 40], fill: false }] }, options: { chartArea: { backgroundColor: 'rgba(251, 85, 85, 0.4)' } } }; var ctx = document.getElementById("myChart").getContext("2d"); new Chart(ctx, config);Thanks. 解决方案 You need to adapt the example you based yourself on to use the height instead of the width.I simply changed the properties and the coordinates to draw the rectangles and it works.http://jsfiddle.net/e7oy6yk6/170/ Chart.pluginService.register({ beforeDraw: function(chart, easing) { if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) { var helpers = Chart.helpers; var ctx = chart.chart.ctx; var chartArea = chart.chartArea; var values = chart.data.datasets[0].data; // Added // var columnCount = chart.data.datasets[0].data.length; var rowCount = Math.ceil(Math.max.apply(null, values) / 10); // Replace by the number of rows you need var width = chartArea.right - chartArea.left; var height = chartArea.bottom - chartArea.top // var columnWidth = width/columnCount; var rowHeight = height / rowCount; // Added ctx.save(); ctx.fillStyle = chart.config.options.chartArea.backgroundColor; var startPoint = chartArea.top // Changed while (startPoint < chartArea.bottom) { // Changed ctx.fillRect(chartArea.left, startPoint, width, rowHeight); // Changed order startPoint += rowHeight * 2; // Changed } ctx.restore(); } } }); var config = { type: 'line', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First dataset", data: [65, 0, 80, 81, 56, 85, 40], fill: false }] }, options: { chartArea: { backgroundColor: 'rgba(251, 85, 85, 0.4)' } } }; var ctx = document.getElementById("myChart").getContext("2d"); new Chart(ctx, config); 这篇关于ChartJs-设置刻度线之间的空间的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..