javascript - 带有工具提示值的图表

Question

我真的很困惑如何在 Angular JS 中创建图表。使用 angular-chart.js，我可以创建一个饼图和条形图。但无法添加工具提示。我正在寻找东西like this将百分比显示为工具提示。

javascript

$scope.labels = ["Test1", "Test2", "Test3", "Test4"];
$scope.data = [8000, 6000, 22000, 500];
$scope.color = ['#90EE90', '#FF6600', '#8080FF'];
$scope.options = {
  legend: {
    display: true
  },
  responsive: true, // set to false to remove responsiveness. Default responsive value is true.
  tooltipEvents: [],
  showTooltips: true,
  tooltipCaretSize: 0,
  onAnimationComplete: function() {
    this.showTooltip(this.segments, true);
  }
}

html

<canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-colors="color" chart-options="options">
</canvas>

我能够创建图表。但是如何设置仅包含值的工具提示或将值转换为百分比？我已经尝试过another example这也不起作用。我尝试使用 code在 Angular 1.4 版本中，但它给出错误，指出值未定义。任何人都可以帮助我创建图表，并在工具提示上显示百分比值吗？

Answer 1

您可以使用jtblin/angular-chart.js因为示例中的库未显示百分比。

fiddle link

还添加了工具提示回调

  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 + "%";
      }
    }
  }