ChartJs-设置刻度线之间的空间的背景色 [英] ChartJs - set background color of the space between ticks

问题描述

我需要设置刻度背景颜色之间的偶数/奇数空间，如下图所示；

关于如何在图表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/

< pre $ = lang-js prettyprint-override> 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/2

1) 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-设置刻度线之间的空间的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！