angle-chart.jsを使用しているときにすべてのツールチップを表示する方法Chart.js 2

Question

angle-chart.jsグラフのすべてのツールチップをオンにして、html2canvasで更新した画像を取得したいとします。

showTooltipメソッドは、現在Chart.jsに含まれていません。

これは機能しません。

$scope.$on('chart-create', function (event, chart) { 
    $scope.bondsChart = chart; 
    console.log(chart); 
}); 

$scope.downloadChartFn = function() { 
    // *** No showTooltip function on Chart.js 2.3. 
    $scope.bondsChart.showTooltip($scope.bondsChart.segments, true); 

    // Yes http://stackoverflow.com/questions/36760712/html2canvas-conflict-in-mozila-firefox 
    if (document.getElementById('green-bonds-bar-chart-stacked-canvas') !== null) { 
     html2canvas(document.getElementById('green-bonds-bar-chart-stacked-canvas'), { 
     onrendered: function (canvas) { 
      var a = document.createElement("a"); 
      a.download = "chart.png"; 
      a.href = canvas.toDataURL("image/png"); 
      document.body.appendChild(a); 
      a.click(); 
     } 
    }); 
} 

Answer 1

チャートプラグインが機能します。このjsfiddleから取られました。

ちょうど重なってからツールヒントを防ぐために、何のアルゴリズムが存在しないとして、私はそれを使用して終了していないオプションに

options: { 
    showAllTooltips: true 
} 

を使用してプラグインを呼び出します。

私は角度チャートでapp.configの中に入れます。

app.config(['ChartJsProvider', function (ChartJsProvider) { 
} 

プラグイン

Chart.pluginService.register({ 
    beforeRender: function (chart) { 
    if (chart.config.options.showAllTooltips) { 
     // create an array of tooltips 
     // we can't use the chart tooltip because there is only one tooltip per chart 
     chart.pluginTooltips = []; 
     chart.config.data.datasets.forEach(function (dataset, i) { 
     chart.getDatasetMeta(i).data.forEach(function (sector, j) { 
      chart.pluginTooltips.push(new Chart.Tooltip({ 
      _chart: chart.chart, 
      _chartInstance: chart, 
      _data: chart.data, 
      _options: chart.options.tooltips, 
      _active: [sector] 
      }, chart)); 
     }); 
     }); 

     // turn off normal tooltips 
     chart.options.tooltips.enabled = false; 
    } 
    }, 
    afterDraw: function (chart, easing) { 
    if (chart.config.options.showAllTooltips) { 
     // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once 
     if (!chart.allTooltipsOnce) { 
     if (easing !== 1) 
      return; 
     chart.allTooltipsOnce = true; 
     } 

     // turn on tooltips 
     chart.options.tooltips.enabled = true; 
     Chart.helpers.each(chart.pluginTooltips, function (tooltip) { 
     tooltip.initialize(); 
     tooltip.update(); 
     // we don't actually need this since we are not animating tooltips 
     tooltip.pivot(); 
     tooltip.transition(easing).draw(); 
     }); 
     chart.options.tooltips.enabled = false; 
    } 
    } 
})