作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
最佳答案
这不是 Chart.js 中的原生选项,但您可以通过插件自行实现。请参阅以下代码中的注释。
new Chart(document.getElementById('chart'), {
type: 'line',
data: {
labels: [0, 1, 2, 3, 4, 5],
datasets: [{
label: 'series 1',
data: [0, 2, 4, 3, 1, 0]
}]
},
options: {
maintainAspectRatio: false,
scales: {
xAxes: [{
gridLines: {
display: false, // must be false since we're going to draw our own 'gridlines'!
color: 'rgba(255, 0, 0, .2)', // can still set the colour.
lineWidth: 5 // can still set the width.
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
}
}]
}
},
plugins: [{ // this is the magical bit :)
afterRender: function(c, options) {
let meta = c.getDatasetMeta(0),
max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data.forEach(function(e) {
if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x, meta.dataset._scale.bottom);
c.ctx.lineTo(e._model.x, e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart"></canvas>
关于javascript - Chart.js 如何仅将行高设置为点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53721661/
我是一名优秀的程序员,十分优秀!