chart.js - 如何隐藏小屏幕的 Chart.js 数据标签

Question

我试图隐藏由 data labels plugin 生成的数据标签对于小屏幕。

我认为我可以使用 chartjs 的 onResize 属性并在宽度变小时时将 display 设置为 false 。这很像找到的隐藏标签解决方案 here .

不幸的是，我无法让它发挥作用。我有以下 CodePen那行不通。

var moneyFormat = wNumb({
    decimals: 0,
    thousand: ',',
    prefix: '$',
    negativeBefore: '-'
});

var percentFormat = wNumb({
    decimals: 0,
    suffix: '%',
    negativeBefore: '-'
});

/*
 * Unregister chartjs-plugins-datalabels - not really necessary for this use case
 */
Chart.plugins.unregister(ChartDataLabels);

var doughnutdata = {
    labels: ['Housing',
        'Food',
        'Transportation',
        'Clothing',
        'Healthcare',
        'Childcare',
        'Misc'],
    datasets: [
        {
            backgroundColor: [
                '#9B2A00',
                '#5B5C90',
                '#6B8294',
                '#1A6300',
                '#BE0000',
                '#B8A853',
                '#64A856'
            ],
            borderColor: [
                '#FFFFFF',
                '#FFFFFF',
                '#FFFFFF',
                '#FFFFFF',
                '#FFFFFF',
                '#FFFFFF',
                '#FFFFFF'
            ],
            data: [88480, 57680, 40050, 18430, 23860, 25840, 17490]
        }
    ]
};

var chartOptions = {
    responsive: true,
    maintainAspectRatio: true,
    legend: {
        labels: {
            boxWidth: 20
        }
    },
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                var index = tooltipItem.index;
                return data.labels[index] + ': ' + moneyFormat.to(data.datasets[0].data[index]) + '';
            }
        }
    },
    plugins: {
        datalabels: {
            anchor: 'end',
            backgroundColor: function (context) {
                return context.dataset.backgroundColor;
            },
            borderColor: 'white',
            borderRadius: 25,
            borderWidth: 1,
            color: 'white',
            font: {
                size: 10
            },
            formatter: function (value, pieID) {
                var sum = 0;
                var dataArr = pieID.chart.data.datasets[0].data;
                dataArr.map(function (data) {
                    sum += data;
                });
                var percentage = percentFormat.to((value * 100 / sum));
                return percentage;
            }
        }
    }
};

var doughnutID = document.getElementById('doughnutchart').getContext('2d');

var pieChart = new Chart(doughnutID, {
    plugins: [ChartDataLabels],
    type: 'doughnut',
    data: doughnutdata,
    options: chartOptions,
    onResize: function(chart, size) {
        var showLabels = (size.width < 500) ? false : true;
        chart.options = {
            plugins: {
                datalabels: {
                    display: showLabels
                }
            }
        };
    }
});

任何关于我做错了什么(和修复)的想法都将不胜感激。

Answer 1

响应性可以使用 scriptable options 来实现在您的情况下，您将使用 display 的函数返回 false 的选项当图表小于特定尺寸 ( example ) 时:

options: {
  plugins: {
    datalabels: {
      display: function(context) {
        return context.chart.width > 500;
      }
    }
  }
}