Блог

Главная - Вопросы по программированию - Chart.js как выделить часть метки

Chart.js как выделить часть метки

#reactjs #chart.js

#reactjs #chart.js

Вопрос:

я пытаюсь выделить часть метки из меток оси на основе того, что искал пользователь.

Однако метка отображается как текст, поэтому теги html отображаются как обычный текст. есть идеи о том, как этого добиться?

введите описание изображения здесь

Ответ №1:

Вы можете использовать API ядра плагина. Он предлагает различные перехваты, которые могут использоваться для выполнения пользовательского кода. В приведенном ниже фрагменте кода я использую afterDraw хук для рисования текста разных стилей под каждой строкой.

При рисовании собственных меток, вероятно, нужно определить поворот текста. Далее вам необходимо указать Chart.js не отображать метки по умолчанию. Это можно сделать с помощью следующего определения внутри диаграммы options .

 scales: {
  xAxes: [{
    ticks: {
      display: false,
      rotation: 40
    }
  }],

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

 layout: {
  padding: {
    bottom: 60
  }
},

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

 new Chart(document.getElementById('myChart'), {
  type: 'bar',
  plugins: [{
    afterDraw: chart => {
      let ctx = chart.chart.ctx;
      let xAxis = chart.scales['x-axis-0'];
      let yAxis = chart.scales['y-axis-0'];
      chart.data.labels.forEach((l, i) => {
        let labelTokens = l.split(';');        
        let rotation = xAxis.options.ticks.rotation * -Math.PI / 180;
        let x = xAxis.getPixelForValue(l);        
        if (labelTokens.length == 2) {
          ctx.save();
          let width = ctx.measureText(labelTokens.join(' ')).width;
          ctx.translate(x, yAxis.bottom   10);
          ctx.rotate(rotation);
          ctx.font = 'italic 12px Arial';
          ctx.fillStyle = 'blue';
          ctx.fillText(labelTokens[0], -width, 0);
          ctx.restore();
        }
        ctx.save();
        let labelEnd = labelTokens[labelTokens.length - 1];
        let width = ctx.measureText(labelEnd).width;
        ctx.translate(x, yAxis.bottom   10);
        ctx.rotate(rotation);
        ctx.font = '12px Arial';        
        ctx.fillText(labelEnd, -width, 0);
        ctx.restore();
      });
    }
  }],
  data: {
    labels: ['NASTY!!;Errors', 'Warnings'],
    datasets: [{
      label: 'Result',
      data: [30, 59],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)'],
      borderWidth: 1
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 60
      }
    },
    legend: {
      display: false
    },
    tooltips: {
      callbacks: {
        title: tooltipItem => tooltipItem[0].xLabel.split(';').join(' ')
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          display: false,
          rotation: 40
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
}); 
 canvas {
  max-width: 250px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" width="10" height="8"></canvas>

Метки: