试图在ChartsJS中为饼图插入另一个标签

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

我使用Chartsjs创建了此饼图。到目前为止,如果您运行该代码段,则可以通过以下方式显示我的标签:

Uno\Company 1
19
(56%)

但是,我希望在下面显示公司文本,以便可以这样显示:

    Uno
    Company1
    19
    (56%)

我尝试创建一个单独的数组:label2:[“ Company1”,“ Company2”,“ Company3”]

然后在回调中,我添加了一个新函数,我认为该函数会给我下面的其他标签,但没有运气。这是我用于此的代码:

title2: function(tooltipItem, data, label2){
   return data['label2'][tooltipItem[0]['index']]
}

有人可以帮我吗?

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
  	label1: ["Uno\\Company1", "Dos\\Company2", "Tres\\Company3"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {
       
        title: function(tooltipItem, data, label1, label2) {
          return data ['label1'][tooltipItem[0]['index']];
        },
        label: function(tooltipItem, data) {
          return data['datasets'][0]['data'][tooltipItem['index']];
        },
        afterLabel: function(tooltipItem, data) {
          var dataset = data['datasets'][0];
          var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100)
          return '(' + percent + '%)';
        }
      },
      backgroundColor: '#FFF',
      titleFontSize: 16,
      titleFontColor: '#0066ff',
      bodyFontColor: '#000',
      bodyFontSize: 14,
      displayColors: false
    }
  }
});
<div>
  <canvas id="myChart" height="100"></canvas>
    <div id="chartjs-tooltip">
       <table></table>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
</script>
javascript charts chart.js
1个回答
0
投票

只需将label1从字符串数组更改为数组数组:

label1: [["Uno", "Company1"], ["Dos", "Company2"], ["Tres", "Company3"]]
© www.soinside.com 2019 - 2024. All rights reserved.