Chart.js 2.0圆环工具提示百分比

2 回答

• 72

  对于那些想要根据当前显示在图表上的内容显示动态百分比的人（不是基于总数据），您可以尝试以下代码：

  tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var meta = dataset._meta[Object.keys(dataset._meta)[0]];
          var total = meta.total;
          var currentValue = dataset.data[tooltipItem.index];
          var percentage = parseFloat((currentValue/total*100).toFixed(1));
          return currentValue + ' (' + percentage + '%)';
        },
        title: function(tooltipItem, data) {
          return data.labels[tooltipItem[0].index];
        }
      }
    },
  

  回复于 2024-04-28T07:32:22+08:00
• 15

  Update: 以下答案显示基于总数据的百分比，但 @William Surya Permana 有一个很好的答案，根据显示的数据进行更新https://stackoverflow.com/a/49717859/2737978

  ---

  在 options 中，您可以传入一个 tooltips 对象（更多内容可以在chartjs docs处读取）

  tooltips 的字段，用于获得所需的结果，是一个带有 label 字段的 callbacks 对象 . label 将是一个函数，它接收您悬停的工具提示项和构成图表的数据 . 只需从此函数返回一个您想要进入工具提示的字符串 .

  这是一个这样的例子

  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        //get the concerned dataset
        var dataset = data.datasets[tooltipItem.datasetIndex];
        //calculate the total of this data set
        var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
          return previousValue + currentValue;
        });
        //get the current items value
        var currentValue = dataset.data[tooltipItem.index];
        //calculate the precentage based on the total and current item, also this does a rough rounding to give a whole number
        var percentage = Math.floor(((currentValue/total) * 100)+0.5);
  
        return percentage + "%";
      }
    }
  }
  

  以及您提供的数据的完整示例

  fiddle

  var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
  };
  var randomColorFactor = function() {
    return Math.round(Math.random() * 255);
  };
  var randomColor = function(opacity) {
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
  };
  
  var config = {
    type: 'doughnut',
    data: {
      datasets: [{
        data: [
          486.5,
          501.5,
          139.3,
          162,
          263.7,
        ],
        backgroundColor: [
          "#F7464A",
          "#46BFBD",
          "#FDB45C",
          "#949FB1",
          "#4D5360",
        ],
        label: 'Expenditures'
      }],
      labels: [
        "Hospitals: $486.5 billion",
        "Physicians & Professional Services: $501.5 billion",
        "Long Term Care: $139.3 billion",
        "Prescription Drugs: $162 billion",
        "Other Expenditures: $263.7 billion"
      ]
    },
    options: {
      responsive: true,
      legend: {
        position: 'bottom',
      },
      title: {
        display: false,
        text: 'Chart.js Doughnut Chart'
      },
      animation: {
        animateScale: true,
        animateRotate: true
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
          	var dataset = data.datasets[tooltipItem.datasetIndex];
            var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
              return previousValue + currentValue;
            });
            var currentValue = dataset.data[tooltipItem.index];
            var percentage = Math.floor(((currentValue/total) * 100)+0.5);         
            return percentage + "%";
          }
        }
      }
    }
  };
  
  
  var ctx = document.getElementById("chart-area").getContext("2d");
  window.myDoughnut = new Chart(ctx, config); {
  
  }
  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="canvas-holder" style="width:75%">
    <canvas id="chart-area" />
  </div>
  

  回复于 2024-04-28T07:32:22+08:00