javascript - 如何使用 chartJs 自定义图表?
问题描述
我正在尝试制作像这个屏幕截图这样的图表。
现在我使用chartjs
如下: -
<!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"></canvas></div>
</div>
<script>
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,'start'].forEach(function(boundary, index) {
utils.srand(8);
new Chart('chart', {
type: 'line',
data: {
labels: generateLabels(),
datasets: [{
backgroundColor: utils.transparentize(presets.red),
borderColor: presets.red,
data: generateData(),
label: 'Dataset',
fill: boundary
}]
},
options: Chart.helpers.merge(options, {
title: {
text: 'fill: ' + boundary,
display: true,
}
})
});
});
</script>
</body>
</html>
有一个问题,这与屏幕截图不完全一样,我怎样才能使它与屏幕截图中的一样?
解决方案
您正在正确使用图表,并且正在使用适当的type: line
. 您只需设置正确的值即可完全按照图像显示图表。我希望这能给你一个想法
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>
推荐阅读
- sql - 将刻度转换为分钟
- reactjs - 开玩笑地运行普通变换后如何变换模块
- heroku - 我无法从命令行登录heroku
- c# - C# Math.Round(值 / 2)。值为十进制。功能不适用于特定数字 4.5
- android - Android - 如何知道 TalkBack 是否正在说话以中断 TTS?
- python - Jupyter Notebook 未从 Anaconda Navigator 启动
- node.js - 无法使用 Angular 6 打印 Node.js 数据
- javascript - 将骰子值附加到动态 javascript 制作的 html 代码
- amazon-mws - 检查产品是FBA还是FBM
- vba - 写入单元格会写入整个范围