Chart.js:如何根据刻度线之间的距离计算labelOffset?

问题描述 投票:0回答:1

Chart.js v2.7.1使用Chrome。链接到示例是https://codepen.io/anon/pen/opbvQZ

如何设置labelOffset取决于刻度之间的距离,因此调整标签的大小不再位于中心(虽然小提示显示数字轴,但重要的是修复也适用于类别类型轴)

对于上下文,我试图将气泡图上的x和y轴的轴标签居中,这会对调整浏览器窗口的大小做出反应。

码;

HTML;

<html>
  <body>
    <div class="myChartDiv">
      <canvas id="myChart" width="600" height="400"></canvas>
    </div>
  </body>
</html>

JS;

var data = {
    datasets: [
        {
            label: 'Dataset 1',
            data: [
                {
                    x: 2.5,
                    y: 2.5,
                    r: 15
                },
                {
                    x: 4.5,
                    y: 4.5,
                    r: 5
                },
                {
                    x: 5.5,
                    y: 1.5,
                    r: 10
                }
            ],
        },
        {
            label: 'Dataset 2',
            data: [
                {
                    x: 3.5,
                    y: 2.5,
                    r: 40
                },
                {
                    x: 1.5,
                    y: 2.5,
                    r: 3
                }
            ],
        }
    ]
};


var options = {
  elements: {
    points: {
      borderWidth: 1,
      borderColor: 'rgb(0, 0, 0)'
    }
  },
  scales:{
        xAxes:[{
          ticks: {
            labelOffset: 50,
            stepSize: 1
          },
          scaleLabel: {
            display: true,
            labelString: 'X Axis',
            fontSize: 16,
            padding: 8
          },
        }],
        yAxes: [{
          ticks: {
            labelOffset: -50,
            stepSize: 1
          },
          scaleLabel: {
            display: true,
            labelString: 'Y Axis',
            fontSize: 16,
            padding: 8
          },
        }]
      },
};

var ctx = document.getElementById("myChart");

var myBubbleChart = new Chart(ctx,{
    type: 'bubble',
    data: data,
    options: options
});
javascript chart.js
1个回答
0
投票

jcopperfield在Github上回答了这个问题,这是解决方案;

// centre x-scale label
var xScale = myBubbleChart.scales['x-axis-0'];
var xLabelOffset = (xScale.getPixelForTick(1) - xScale.getPixelForTick(0)) / 2;
myBubbleChart.options.scales.xAxes[0].ticks.minor.labelOffset = xLabelOffset;

// centre y-scale label
var yScale = myBubbleChart.scales['y-axis-0'];
var yLabelOffset = (yScale.getPixelForTick(0) - yScale.getPixelForTick(1)) / 2;
myBubbleChart.options.scales.yAxes[0].ticks.minor.labelOffset = yLabelOffset;

// update chart
myBubbleChart.update();
© www.soinside.com 2019 - 2024. All rights reserved.