相关疑难解决方法(0)

我想问一下是否可以使用Chart.js 显示数据值？我想打印图表.

谢谢你的建议.

我在Stack Overflow中发现了类似的问题,但是所有这些问题都在一年前和两年前得到了解决.现在Chart.js出现在版本2中,并且许多文档都发生了变化.有人可以帮我展示带有标签的饼图示例 - 或者饼图及其所有片段的工具提示是否可见？

UPDATE

感谢@potatopeelings,他的回答非常适合Chart.js v2.1.

虽然我最初询问如何在饼图上永久显示工具提示,但我找到了一个更好的解决方案:以百分比形式显示值作为标签!它现在在Chart.js v2.1中启用了饼图.在图表选项中:

animation: {
  duration: 0,
  onComplete: function () {
    var self = this,
        chartInstance = this.chart,
        ctx = chartInstance.ctx;

    ctx.font = '18px Arial';
    ctx.textAlign = "center";
    ctx.fillStyle = "#ffffff";

    Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
        var meta = self.getDatasetMeta(datasetIndex),
            total = 0, //total values to compute fraction
            labelxy = [],
            offset = Math.PI / 2, //start sector from top
            radius,
            centerx,
            centery, 
            lastend = 0; //prev arc's end line: starting with 0 …

我使用图表 js 库来制作饼图。我想始终显示工具提示。我已经做到了这一点。我已附上屏幕截图。

但现在工具提示是重叠的。怎么解决这个问题呢？

这是我的代码

myPieChart = new Chart(pie_chart).Pie(data_results.comp.pie, {
          tooltipTemplate: "<%= value %> %",
          scaleFontSize: 14,
          scaleFontColor: "#333",
          tooltipFillColor: "rgba(0,0,0,0)",
          onAnimationComplete: function()
          {
              this.showTooltip(this.segments, true);
          },

          tooltipEvents: [],
          tooltipFontColor: "#000",
          });

如果工具提示位置已经存在，我想更改该位置。

如何使用Chart.js版本2(alpha)显示工具提示？

我试过这个Chart.js - Donut总是显示工具提示？,但似乎在最后一个版本中已经改变了.

我正在学习 angular-chart-js 的阶段。我正在尝试使用 angular-chart.js 来绘制饼图。但是我无法找到一种在饼图上显示标签（而不是工具提示）的方法，这些标签描述了每个数据切片。

这是我如何做到的：

angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window', '$routeParams',
    function($scope, $http, $location, $window) {
        var diskDataJson = {
            "data": [80, 12],
            "labels": [Used space, Free Space],
            "colours": ['#9AB6F0', '#C2D3F6']
        };
    
        $scope.pieDiskData = json;
    }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table border="0" width="100%">
  <tr>
    <td style="border-left: 1px solid #0099CC" width="25%">
      <center><span><label ng-bind-html="'load.static.dashboard.system.DUSAGE' | translate"/></span>
      </center>
      <canvas id="pie33" class="chart chart-pie chart-xs ng-isolate-scope" height="120" width="240" data="pieDiskData.data" labels="pieDiskData.labels" colours="pieDiskData.colours" legend="true"></canvas>
    </td>
  </tr>
</table>