Chart.js

Question

我正在使用 chart.js 进行可视化。

我正在使用库创建以下图表：

function createConfig(legendPosition, colorName) {
  return {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      datasets: [{
        label: 'My First Dataset',
        data: [-91, -85, -70, -96, 70, -81, -85, -66, 47, 26, -7, -4],
        backgroundColor: "",
        borderColor: 'rgb(100, 73, 216)',
        borderWidth: 1
      }]
    },

    options: {
      responsive: true,
      legend: {
        position: legendPosition,
      },
      scales: {
        xAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Value'
          }
        }]
      },
    }
  };
}

window.onload = function(e) {
  var ctx = document.getElementById('chart-legend-bottom').getContext('2d');
  var config = createConfig('bottom', 'purple');
  
  let myLineExtend = Chart.controllers.line.prototype.draw;
  Chart.helpers.extend(Chart.controllers.line.prototype, {
    draw: function() {
      myLineExtend.apply(this, arguments);
      this.chart.chart.ctx.textAlign = "center"
      this.chart.chart.ctx.font = "40px Roboto black";
      this.chart.chart.ctx.fillText("www.google.com", 450, 150)
    }
  });
  
  new Chart(ctx, config);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>

<body>
  <canvas id="chart-legend-bottom" width="600" height="400"></canvas>
</body>

在移动设备上显示上述示例时，插入的文本不会随图表缩放。

关于如何根据屏幕大小缩放文本有什么建议吗？

感谢您的回复！

Answer 1

你可以利用Plugin Core API。它提供了可用于执行自定义代码的不同挂钩。在您的情况下，您可以使用 afterDraw 挂钩在根据 chart.scales.

计算的位置绘制文本

请查看您修改后的代码，看看它是如何工作的。

new Chart('chart-legend-bottom', {
  type: 'line',
  plugins: [{
    afterDraw: chart => {      
      let xAxis = chart.scales['x-axis-0'];
      let yAxis = chart.scales['y-axis-0'];
      let x = (xAxis.left + xAxis.right) / 2;
      let y = yAxis.getPixelForValue(0);
      let ctx = chart.chart.ctx;
      ctx.save();
      ctx.font = '40px Roboto black';
      ctx.textAlign = 'center';
      ctx.fillText('www.google.com', x, y);
      ctx.restore();
    }
  }],
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: 'My First Dataset',
      data: [-91, -85, -70, -96, 70, -81, -85, -66, 47, 26, -7, -4],
      backgroundColor: "",
      borderColor: 'rgb(100, 73, 216)',
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    legend: {
      position: 'bottom'
    },
    scales: {
      xAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Month'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="chart-legend-bottom" width="600" height="400"></canvas>

Chart.js - 使背景文本响应

Chart.js - make background text responsive

javascript