[英]Saving ChartJS chart showing all tooltips
I have a problem saving ChartJS charts including tooltips (should be shown all together). 我在保存包含工具提示的ChartJS图表时遇到了问题(应该一起显示)。 When I save the chart (right click -> save as / the canvas), then I have the chart without tooltips.
当我保存图表时(右键单击->另存为/画布),那么图表中没有工具提示。 How can I download the charts including tooltips?
如何下载包含工具提示的图表? I couldn't find any hint or idea in the documentation.
我在文档中找不到任何提示或想法。
Thanks a lot. 非常感谢。
Found a solution on my own. 自己找到了解决方案。
I used the following plugin: 我使用了以下插件:
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;
}
}
});
Additionally I used the following custom function to switch on all tooltips, download the chart and switch off all tooltips again: 另外,我使用以下自定义功能打开所有工具提示,下载图表并再次关闭所有工具提示:
function downloadChart1() {
chart1.options.showAllTooltips = true;
chart1.update(0, false);
var returnString = $("#chart1")[0].toDataURL('image/png').replace("image/png", "image/octet-stream");
$("#downloadChartPng1")[0].setAttribute("href", returnString);
chart1.options.showAllTooltips = false;
chart1.options.tooltips.enabled = true;
chart1.update(0, false);
}
Then I used simply the following link to download the chart: 然后,我仅使用以下链接下载图表:
<a id="downloadChartPng1"
onClick="downloadChart1()"
title="picture"
download="chart_name.png">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.