var ctx = document.getElementById("canvas-chart").getContext("2d"),
data = {
labels: [ "RP.800,000", "RP.400,000", "RP.200,000"],
datasets: [{
label: "",
data: [ "800000", "400000", "200000"],
borderColor: "#744c7e",
lineTension: 0,
pointBorderColor: "#bfc766",
pointBackgroundColor: "#bfc766"
}]
};
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,
_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;
}
}
});
var lineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
legend:
{
display: false
},
elements:
{
line:
{
fill: false
}
},
showAllTooltips: true,
scales:
{
gridLines: {
offsetGridLines: true
},
xAxes: [{
display: false
}],
yAxes: [{
display: true,
ticks: {
min: 100000,
max: 900000,
fixedStepSize: 100000,
callback: function (value) {
return '';
}
}
}]
},
tooltips: {
backgroundColor: '#92b95e',
titleColor: '#FFF',
titleFontStyle: 'normal',
xAlign: 'bottom',
callbacks: {
label: function () {
}
}
},
}
});
https://jsfiddle.net/k4pty0ds/
正如您所看到的,最后一个工具提示被切断了。
根据Chart.js doc,我想添加 paddingRight ,我不知道如何。请帮忙。
我尝试添加尺度,但它不起作用。
当我按照文档并使用registerScaleType也失败。