在Donut Chartjs中看不到很小的价值

时间:2019-02-13 12:33:21

标签: javascript charts chart.js

对于甜甜圈图类型,小数据不可见。我可以在不更改标签值的情况下调整大小吗? display

我的图表选项:

options: {
    cutoutPercentage: 65,
    maintainAspectRatio: false,
    legend: {
        display: false
    },
    plugins: {
        datalabels: {
            display: false
        }
    },
    tooltips: {
        enabled: true,
        mode: 'nearest'
    },
     scales: {
        yAxes: [{
            ticks: {
                max: 5,
                min: 0,
                stepSize: 0.5
            }
        }]
    }

}

示例: http://jsfiddle.net/Lkya2tqb/

1 个答案:

答案 0 :(得分:1)

我将数据集转换为百分比,并将一个小值舍入为1。

var seriesData = [1,210,215];
var total = seriesData.reduce((a,v) => a + v);
var inPercent = seriesData.map(v => Math.max(v / total * 100, 1)); 

为工具提示创建回调。

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      var value = seriesData[tooltipItem.index];
      var label = data.labels[tooltipItem.index];
      return `${label}: ${value}`;
    }
  }

示例:http://jsfiddle.net/9jzedqt2/