如何使用angular-chart.js显示所有工具提示Chart.js 2

我想打开angular-chart.js图表中的所有工具提示，然后使用html2canvas获取更新的图像。如何使用angular-chart.js显示所有工具提示Chart.js 2

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(); 
     } 
    }); 
}

来源

2017-02-09 Interlated

图表插件确实有效。采取从这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; 
    } 
    } 
})

来源

2017-02-21 19:32:12 Interlated

如何使用angular-chart.js显示所有工具提示Chart.js 2

回答

相关问题