CHART.JS Как я могу сместить / переместить / отрегулировать метки на оси Y, чтобы они находились посередине линий сетки, а не центрировались на линиях сетки? - PullRequest
Новая
       26

CHART.JS Как я могу сместить / переместить / отрегулировать метки на оси Y, чтобы они находились посередине линий сетки, а не центрировались на линиях сетки?

0 голосов
/ 25 августа 2018

Я использую chart.js внутри приложения Ionic / Angular для построения линейного графика. Большая проблема, с которой я сейчас сталкиваюсь, заключается в том, что я хотел бы, чтобы метки вдоль оси y (зеленый, желтый, оранжевый, красный) располагались между горизонтальными линиями сетки, а не центрировались на линиях сетки, как они сейчас находятся на изображении. ..

Я попытался использовать плагин, упомянутый в этом вопросе , но без удачи. Я также попытался снова использовать свойство offsetGridlines в реальной документации chart.js, но безуспешно.

Бесплатные бонусные баллы, если кто-либо также может помочь, если фактическая осевая линия внизу будет такой же ширины, как и другие горизонтальные линии сетки

Вот код, который имеет дело с этим конкретным аспектом диаграммы ... 

options: {
    legend: {
      display: false
    },
    scaleShowVerticalLines: false,
    layout: {
      padding: 25
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false
        },
        ticks: {
          min: 0,
          max: 100,
          stepSize: 25,
          fontColor: 'white',
          callback: function(value) {  
            if (value === 25) {
                return 'Red';
            } else if (value === 50) {
                return 'Orange';
            } else if (value === 75) {
                return 'Yellow';
            } else if (value === 100){
                return 'Green';
            } else {
              return '';
            }
          }
        }
      }]
    }
  },

1 Ответ

0 голосов
/ 26 августа 2018

Я прокомментировал изменения в приведенном ниже фрагменте, но вкратце объясню:

Я интегрировал подключаемый модуль, с которым вы связались, но изменил его, чтобы установить исходные отметки на прозрачные, и поэтому удалил закрытие beforeDrawкоторый, кажется, не работает.

Для бонусных баллов: хитрость заключается в том, чтобы удалить границу оси X, а затем задать стиль «нулевой линии», чтобы соответствовать другим линиям сетки. 

var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
    datasets: [{
      data: [25, 35, 20, 45, 65, 26, 49, 70, 75, 87],
      borderColor: 'white',
      fill: false
    }]
  },
  options: {
    legend: {
      display: false
    },
    scaleShowVerticalLines: false,
    layout: {
      padding: 25
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false, // bonus points.
        },
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false,
          color: 'rgba(0,0,0,.3)', // bonus points.
          zeroLineColor: 'rgba(0,0,0,.3)' // bonus points.
        },
        ticks: {
          min: 0,
          max: 100,
          stepSize: 25,
          fontColor: 'transparent', // changed from 'white'
          callback: function(value) {
            if (value === 25) {
              return 'Red';
            } else if (value === 50) {
              return 'Orange';
            } else if (value === 75) {
              return 'Yellow';
            } else if (value === 100) {
              return 'Green';
            } else {
              return '';
            }
          }
        }
      }]
    }
  },
  plugins: [{
    afterDraw: function(chart) {
      var ctx = chart.ctx;
      var yAxis = chart.scales['y-axis-0'];
      var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
      // loop through ticks array
      Chart.helpers.each(yAxis.ticks, function(tick, index) {
        if (index === yAxis.ticks.length - 1) return;
        var xPos = yAxis.right;
        var yPos = yAxis.getPixelForTick(index);
        var xPadding = 10;
        // draw tick
        ctx.save();
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'right';
        ctx.fillStyle = 'white';
        ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
        ctx.restore();
      });
    }
  }]
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart" style="background-color:#296390"></canvas>
...