Chartjs polararea ticks标签重叠

aiazj4mn 于 2023-04-11 发布在 Chart.js

关注(0)|答案(1)|浏览(160)

我使用chartjs的polarArea图表来显示我的数据。但是我的tick标签被颜色重叠了。

var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'polarArea',
      data: {
        labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
        datasets: [{
          data: [10, 20, 30, 40, 50],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
        }]
      },
      options: {
      maintainAspectRatio: false,
        scale: {
          pointLabels: {
            fontSize: 14,
            fontColor: 'black',
            fontStyle: 'normal',
            fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
            callback: function(value, index, values) {
              return value + '°'; // Add a degree symbol to the tick labels
            }
          }
        },
        plugins: [{
          afterUpdate: function(chart) {
            var ticks = chart.scales.r.ticks; // Get the tick values from the r scale
            var pointLabels = chart.scales.r.pointLabels; // Get the point labels from the r scale
            var radius = chart.scales.r.getDistanceFromCenterForValue(ticks[ticks.length-1]); // Get the radius of the outermost tick
            var offset = 50; // Set the desired offset value

            for (var i = 0; i < pointLabels.length; i++) {
              var angleRadians = chart.config.options.scale.angleLines.lineWidth * i;
              var x = radius * Math.cos(angleRadians) + offset;
              var y = radius * Math.sin(angleRadians) + offset;
              pointLabels[i].x = x;
              pointLabels[i].y = y;
            }
          }
        }],
        // other chart configurations...
      }
    });

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart" width="350" height="400"></canvas>

如何轻微移动刻度标签使其更明显。使用深色，这会造成困难。我想按照图.

所示进行定位

chart.js

来源：https://stackoverflow.com/questions/75977170/chartjs-polararea-ticks-label-getting-overlapped

1条答案

按热度按时间

6jygbczu1#

我搜索了所有的选项，似乎没有简单的方法来做到这一点。除了太简单的方法-在options.scales.r.ticks.callback中的标签文本前面添加空格字符。
下面的解决方案是基于创建一个自定义轴类，从RadialLinearScale派生，只覆盖它的drawLabels，以便在标准标签绘制操作之前转换画布上下文，并将其恢复为所有其他用途。我认为这些方法没有文档记录，但可以在charts.js的高质量源代码中轻松识别。
我还调整了一些原始选项的选项对象键，以在此环境中工作。

class TranslatedLabelsScale extends Chart.RadialLinearScale{
    static id = 'linearRadialWithLabelTranslations';
    drawLabels(){
        const translation = this.options.ticks?.labelTranslation || {};
        this.ctx.save();
        this.ctx.translate(translation.x || 0, translation.y || 0);
        super.drawLabels();
        this.ctx.restore();
    }
}
Chart.register(TranslatedLabelsScale);

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
    type: 'polarArea',
    data: {
        labels: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
        datasets: [{
            data: [10, 20, 30, 40, 50],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            r: {
                //startAngle: 20,
                type: 'linearRadialWithLabelTranslations',
                ticks: {
                    padding: 10,
                    fontSize: 14,
                    color: '#000',
                    fontStyle: 'normal',
                    labelTranslation: {x: 20, y: 0},
                    z: 10,
                    backdropColor: 'rgba(255, 255, 255, 0)',
                    fontFamily: 'Helvetica Neue,Helvetica,Arial,sans-serif',
                    callback: function(value, index, values){
                        // poor man's solution: return '     '+value + '°'
                        return value + '°'; // Add a degree symbol to the tick labels
                    }
                }
            }
        }, // other chart configurations...
    }
});

<canvas id="myChart" width="350" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

赞(0）回复(0）举报 2023-04-11

我来回答

Chartjs polararea ticks标签重叠

1条答案

相关问题

热门标签

最新问答