我已经使用chartJs创建了折线图，现在它可以正常工作，但是对我来说没有什么问题，实际上我想使用chartJs中的折线图来减小三角形的底部宽度。该怎么办？
尝试了什么：-
var presets = window.chartColors;
var utils = Samples.utils;
var inputs = {
min: 0,
max: 100,
count: 8,
decimals: 2,
continuity: 1
};
function generateData(config) {
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
}
function generateLabels(config) {
return utils.months(Chart.helpers.merge({
count: inputs.count,
section: 3
}, config || {}));
}
var options = {
maintainAspectRatio: false,
spanGaps: false,
elements: {
line: {
tension: 0.000001
}
},
plugins: {
filler: {
propagate: false
}
},
scales: {
xAxes: [{
ticks: {
autoSkip: false,
maxRotation: 0
}
}]
}
};
[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
const canvas = document.getElementById('chart-' + index);
if(canvas)
{
utils.srand(8);
var ctx = canvas.getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
//data: generateData(),
data: [0, 0, 40, 0,0, 50, 0, 0, 0],
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
}
});<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>area > boundaries | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="https://www.chartjs.org/samples/latest/style.css">
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/samples/latest/charts/area/analyser.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
</div>
</body>
</html>答案将不胜感激！
谢谢您的努力！
您可以将xAxis定义为time caresian axis，去掉data.labels，而是将各个数据点指定为objects with an x and y property。
[请注意，Chart.js使用Moment.js作为时间轴的功能。因此，您应该使用在单个文件中包含Moment.js的Chart.js的
x。
ybundled version
new Chart('canvas', {
type: 'line',
data: {
datasets: [{
label: 'My Dataset',
data: [
{ x: '01-01', y: 0 },
{ x: '02-26', y: 0 },
{ x: '03-01', y: 40 },
{ x: '03-05', y: 0 },
{ x: '05-28', y: 0 },
{ x: '06-01', y: 50 },
{ x: '06-05', y: 0 },
{ x: '08-01', y: 0 }
],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
lineTension: 0
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'MM-DD',
unit: 'month',
displayFormats: {
month: 'MMM'
},
tooltipFormat: 'MMM DD'
}
}]
}
}
});