如何在chart.js中从画布制作内部填充

Question

我使用https://chartjs-plugin-datalabels.netlify.com/用于绘制数据标签。我试图找到问题，发现(https://github.com/chartjs/chartjs-plugin-datalabels/issues/88)但这个解决方案不适合我。正如你所看到的，如果我添加布局填充，它会影响网格线的高度。我需要一些像内衬的东西。

const ITEMS_COUNT = 25;
const MIN = -8000;
const MAX = 8000;
const defaultDatasetOptions = {
pointRadius: 0,
pointHoverRadius: 0,
pointBorderWidth: 0,
pointHoverBorderWidth: 0,
pointHitRadius: 10,
borderWidth: 0
};
const datalabels = {
color: 'black',
anchor: context => {
const index = context.dataIndex;
const value = context.dataset.data[index];
return value < 0 ? 'start' : 'end';
},
align: context => {
const index = context.dataIndex;
const value = context.dataset.data[index];
return value < 0 ? 'end' : 'start';
},
display: getDataLabelDisplay,
formatter: value => value.toLocaleString(),
offset: -20
};
const data = {
labels: _.range(1, ITEMS_COUNT),
datasets: [
{
...defaultDatasetOptions,
label: 'Series 1',
data: Array.from(Array(ITEMS_COUNT), () => _.random(MIN, MAX)),
backgroundColor: 'rgba(255, 0, 0, .3)'
},
{
...defaultDatasetOptions,
label: 'Series 2',
data: Array.from(Array(ITEMS_COUNT), () => _.random(MIN, MAX)),
backgroundColor: 'rgba(0, 255, 0, .3)'
},
{
...defaultDatasetOptions,
label: 'Series 3',
data: Array.from(Array(ITEMS_COUNT), () => _.random(MIN, MAX)),
backgroundColor: 'rgba(0, 0, 255, .3)'
}
]
};
const options = {
legend: {
display: false
},
scales: {
xAxes: [
{
type: 'category',
gridLines: {
offsetGridLines: true,
color: 'orange',
tickMarkLength: 0,
drawBorder: false
},
ticks: {
display: false,
maxRotation: 0,
beginAtZero: true,
autoSkip: false,
stepSize: 1
},
offset: true
}
],
yAxes: [{ display: false }]
},
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'index',
intersect: false
},
layout: {
padding: {
top: 20,
bottom: 20
}
},
plugins: {
datalabels
}
};
new Chart(document.querySelector('canvas'), {
type: 'line',
data,
options
});
// You can skip this function
function getDataLabelDisplay(context) {
const index = context.dataIndex;
const value = context.dataset.data[index];
if (value === 0) {
return false;
}
const minVisibleIndex = 0;
const maxVisibleIndex = _.size(context.chart.data.labels) - 1;
const dataInViewport = _.flatten(
_.map(context.chart.data.datasets, dataset => {
const dataInViewPort = _.slice(dataset.data, minVisibleIndex, maxVisibleIndex + 1);
return _.map(dataInViewPort, (value, index) => {
return {
index: minVisibleIndex + index,
value
};
});
})
);
const minData = _.minBy(dataInViewport, 'value');
const minDataValue = _.get(minData, 'value');
const maxData = _.maxBy(dataInViewport, 'value');
const maxDataValue = _.get(maxData, 'value');
const allMinData = _.filter(dataInViewport, data => data.value === minDataValue);
const allMaxData = _.filter(dataInViewport, data => data.value === maxDataValue);
const isFoundedInMinValues = Boolean(_.find(allMinData, ['index', index]));
const isFoundedInMaxValues = Boolean(_.find(allMaxData, ['index', index]));
return value < 0 ? isFoundedInMinValues && value === minDataValue : isFoundedInMaxValues && value === maxDataValue;
}

canvas { border: 1px solid black; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
<canvas></canvas>

Answer 1

我现在无法证明，但有时问题出在您使用的chart.js版本上。尝试使用2.7.0