所以我最近开始使用chartjs。我的目标是创建一个渐进的线条来绘制传感器数据。问题是它没有添加轴标题，这使得它阅读起来很混乱。我尝试了文档中的所有方法，但都没有成功。
标签文件：https://www.chartjs.org/docs/latest/axes/labelling.html
渐进式生产线文件：https://www.chartjs.org/docs/latest/samples/animations/progressive-line.html
下面是我的代码：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Daten Logger FP2017</title>
<!-- CSS could also be loaded from local storage or be embedded. --->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'>
</head>
<body>
<h1>Daten Logger FP2017</h1>
<p>Übersicht für die Powersupply FP2017</p>
<!-- All details are shown in a table --->
<div id="details"></div>
<table>
<tr>
<th>Data</th>
<th>Value</th>
</tr>
<tr>
<td>WifiFault:</td>
<td>{string_message_WifiFault}</td>
</tr>
<tr>
<td>Batfault:</td>
<td>{BatFault}</td>
</tr>
<tr>
<td>MainsFault:</td>
<td>{MainsFault}</td>
</tr>
<tr>
<td>SensorFault:</td>
<td>{SensorFault}</td>
</tr>
<tr>
<td>SelftestFault:</td>
<td>{SelftestFault}</td>
</tr>
<tr>
<td>InitialCharge:</td>
<td>{InitialCharge}</td>
</tr>
<tr>
<td>Is:</td>
<td>{str(Is) + " mA"}</td>
</tr>
<tr>
<td>Vs:</td>
<td>{str(Vs) + " mV"}</td>
</tr>
<tr>
<td>Ib:</td>
<td>{str(Ib) + " mA"}</td>
</tr>
<tr>
<td>Vb:</td>
<td>{str(Vb) + " mV"}</td>
</tr>
<tr>
<td>Vb12:</td>
<td>{str(Vb12) + " mV"}</td>
</tr>
<tr>
<td>Vb24:</td>
<td>{str(Vb24) + " mV"}</td>
</tr>
<tr>
<td>T:</td>
<td>{str(T) + " °C"}</td>
</tr>
<tr>
<td>Cap:</td>
<td>{str(Cap) + " mAH"}</td>
</tr>
<tr>
<td>SoC</td>
<td>{str(SoC) + " %"}</td>
</tr>
<tr>
<td>Ri:</td>
<td>{str(Ri) + " mOhm"}</td>
</tr>
<tr>
<td>Ri12:</td>
<td>{str(Ri12) + " mOhm"}</td>
</tr>
<tr>
<td>Ri24:</td>
<td>{str(Ri24) + " mOhm"}</td>
</tr>
</table>
Logging Interval in Sekunden:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<form action="/logging_start" method="get">
Start Data Logging:
<button name="subject" type="submit" value="log_start">START</button>
</form>
<form action="/logging_stop" method="get">
Stop Data Logging:
<button name="subject" type="submit" value="log_stop">STOP</button>
</form>
<div class="chartBox">
<canvas id="myChart" width="400" height="400"></canvas>
<div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const data = [];
const data2 = [];
let prev = 100;
let prev2 = 80;
for (let i = 0; i < 1000; i++) {
prev += 5 - Math.random() * 10;
data.push({x: i, y: prev});
prev2 += 5 - Math.random() * 10;
data2.push({x: i, y: prev2});
}
const totalDuration = 100;
const delayBetweenPoints = totalDuration / data.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(
100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Data1',
borderColor: 'red',
borderWidth: 1,
radius: 0,
data: data,
},
{
borderColor: 'blue',
borderWidth: 1,
radius: 0,
data: data2,
}]
},
options: {
animation: {
x: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return (ctx.index * delayBetweenPoints);
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return (ctx.index * delayBetweenPoints);
}
}
},
interaction: {
intersect: false
},
plugins: {
legend: false,
display: true,
text: 'Month'
},
scales: {
x: {
type: 'linear',
}
}
}
});
</script>
</body>
</html>非常感谢帮助：）
编辑：感谢您的帮助，这是工作代码...
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Daten Logger FP2017</title>
<!-- CSS could also be loaded from local storage or be embedded. --->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'>
</head>
<body>
<h1>Daten Logger FP2017</h1>
<p>Übersicht für die Powersupply FP2017</p>
<!-- All details are shown in a table --->
<div id="details"></div>
<table>
<tr>
<th>Data</th>
<th>Value</th>
</tr>
<tr>
<td>WifiFault:</td>
<td>{string_message_WifiFault}</td>
</tr>
<tr>
<td>Batfault:</td>
<td>{BatFault}</td>
</tr>
<tr>
<td>MainsFault:</td>
<td>{MainsFault}</td>
</tr>
<tr>
<td>SensorFault:</td>
<td>{SensorFault}</td>
</tr>
<tr>
<td>SelftestFault:</td>
<td>{SelftestFault}</td>
</tr>
<tr>
<td>InitialCharge:</td>
<td>{InitialCharge}</td>
</tr>
<tr>
<td>Is:</td>
<td>{str(Is) + " mA"}</td>
</tr>
<tr>
<td>Vs:</td>
<td>{str(Vs) + " mV"}</td>
</tr>
<tr>
<td>Ib:</td>
<td>{str(Ib) + " mA"}</td>
</tr>
<tr>
<td>Vb:</td>
<td>{str(Vb) + " mV"}</td>
</tr>
<tr>
<td>Vb12:</td>
<td>{str(Vb12) + " mV"}</td>
</tr>
<tr>
<td>Vb24:</td>
<td>{str(Vb24) + " mV"}</td>
</tr>
<tr>
<td>T:</td>
<td>{str(T) + " °C"}</td>
</tr>
<tr>
<td>Cap:</td>
<td>{str(Cap) + " mAH"}</td>
</tr>
<tr>
<td>SoC</td>
<td>{str(SoC) + " %"}</td>
</tr>
<tr>
<td>Ri:</td>
<td>{str(Ri) + " mOhm"}</td>
</tr>
<tr>
<td>Ri12:</td>
<td>{str(Ri12) + " mOhm"}</td>
</tr>
<tr>
<td>Ri24:</td>
<td>{str(Ri24) + " mOhm"}</td>
</tr>
</table>
Logging Interval in Sekunden:
<form id="form" onsubmit="return false;">
<input type="text" id="userInput" />
<input type="submit" onclick="othername();" />
</form>
<form action="/logging_start" method="get">
Start Data Logging:
<button name="subject" type="submit" value="log_start">START</button>
</form>
<form action="/logging_stop" method="get">
Stop Data Logging:
<button name="subject" type="submit" value="log_stop">STOP</button>
</form>
<div class="chartBox">
<canvas id="myChart" width="400" height="400"></canvas>
<div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const data = [];
const data2 = [];
let prev = 0;
let prev2 = 0;
for (let i = 0; i < 1000; i++) {
prev += 5 - Math.random() * 10;
data.push({x: i, y: prev});
prev2 += 5 - Math.random() * 10;
data2.push({x: i, y: prev2});
}
const totalDuration = 100;
const delayBetweenPoints = totalDuration / data.length;
const previousY = (ctx) => ctx.index === 0 ? ctx.chart.scales.y.getPixelForValue(
100) : ctx.chart.getDatasetMeta(ctx.datasetIndex).data[ctx.index - 1].getProps(['y'], true).y;
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Data1',
borderColor: 'red',
borderWidth: 1,
radius: 0,
data: data,
},
{
label: 'Data2',
borderColor: 'blue',
borderWidth: 1,
radius: 0,
data: data2,
}]
},
options: {
animation: {
x: {
title: {
display: true,
text: 'x title',
},
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: NaN, // the point is initially skipped
delay(ctx) {
if (ctx.type !== 'data' || ctx.xStarted) {
return 0;
}
ctx.xStarted = true;
return (ctx.index * delayBetweenPoints);
}
},
y: {
type: 'number',
easing: 'linear',
duration: delayBetweenPoints,
from: previousY,
delay(ctx) {
if (ctx.type !== 'data' || ctx.yStarted) {
return 0;
}
ctx.yStarted = true;
return (ctx.index * delayBetweenPoints);
}
}
},
interaction: {
intersect: true,
},
plugins: {
legend: true,
},
scales: {
x: {
type: 'linear',
title: {
display: true,
text: 'seconds'
},
},
y: {
type: 'linear',
title: {
display: true,
text: 'mAH'
},
}
}
}
});
</script>
</body>
</html>
1条答案
按热度按时间mitkmikd1#
如您链接的文档中所述，您需要配置scales[scaleId].title以显示比例标题：
第一个