javascript – Chart.js 2.0甜甜圈工具提示百分比

我已经使用chart.js 1.0,并且我的甜甜圈图表工具提示基于数据分割的数据显示百分比,但是我无法用图表2.0复制这个数据.

我搜索过高低,还没找到工作解决方案.我知道这将是选择,但我尝试过的一切都使得馅饼功能失调.

<html>
 
<head>
    <title>Doughnut Chart</title>
    <script src="../dist/Chart.bundle.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>
 
<body>
    <div id="canvas-holder" style="width:75%">
        <canvas id="chart-area" />
    </div>
    <script>
    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() + ',' + (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
            }
 
        }
    };
 
    window.onload = function() {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myDoughnut = new Chart(ctx,config);{
 
        }
    };
 
 
    </script>
</body>
 
</html>

解决方法

在选项中,您可以传入一个工具提示对象(更多可以在 chartjs docs读取)

一个工具提示字段,以获取您想要的结果,是一个带有标签字段的回调对象.标签将是一个功能,它接收您已经悬停的工具提示项目以及构成图形的数据.从这个函数返回一个字符串,你想要进入工具提示.

这是一个这样的例子

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 precentage = Math.floor(((currentValue/total) * 100)+0.5);
 
      return precentage + "%";
    }
  }
}

并提供您提供的数据的完整示例

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() + ',' + (opacity || '.3') + ')';
};
 
var config = {
  type: 'doughnut',data: {
    datasets: [{
      data: [
        486.5,backgroundColor: [
        "#F7464A",label: 'Expenditures'
    }],labels: [
      "Hospitals: $486.5 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,array) {
            return prevIoUsValue + currentValue;
          });
          var currentValue = dataset.data[tooltipItem.index];
          var precentage = Math.floor(((currentValue/total) * 100)+0.5);         
          return precentage + "%";
        }
      }
    }
  }
};
 
 
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>

javascript – Chart.js 2.0甜甜圈工具提示百分比

解决方法

猜你在找的JavaScript相关文章