[英]How to install Chart.js and angular-chart.js (Error: Chart.js library needs to be included)
[英]How to show all tooltips when using angular-chart.js Chart.js 2
我想在angular-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();
}
});
}
图表插件可以正常工作。 取自此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;
}
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.