Update Chart Js 3.x to the latest version and ask code modification questions #11668
Unanswered
IdiotsPapa
asked this question in
Q&A
Replies: 1 comment
-
@IdiotsPapa the options must be changed. Didn't test it but it should be something like that: options: {
elements: {
line: {
tension: 0.001,
},
point: {
//pointStyle: (ctx) => console.log(ctx),
radius: 0,
hoverRadius: 5,
},
},
animation: {
duration: 0,
},
plugins: {
title: {
display: true,
text: "Chart.js Time Scale",
},
legend: {
display: false,
position: "bottom",
},
}
scales: {
xAxes: {
type: "time",
time: {
parser: timeFormat,
round: "second",
tooltipFormat: timeFormat,
},
title: {
display: false,
text: "시간",
},
ticks: {
display: false,
callback(_, index, values) {
const value = values[index];
return [
window.moment(value).format("HH"),
window.moment(value).format("mm"),
];
},
},
},
yAxes: {
min: 0,
max: 100,
title: {
display: false,
text: "사용율(%)",
},
ticks: {
display: false,
},
},
},
}, |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Which part of the code below should I change to show the chart normally?
Sample Image
![Sample Chart](https://private-user-images.githubusercontent.com/120576095/304590727-80313f92-9e7c-4be4-9c41-e113585130b7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQyNjY3MzUsIm5iZiI6MTcyNDI2NjQzNSwicGF0aCI6Ii8xMjA1NzYwOTUvMzA0NTkwNzI3LTgwMzEzZjkyLTllN2MtNGJlNC05YzQxLWUxMTM1ODUxMzBiNy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODIxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgyMVQxODUzNTVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04NTkxYjE4NzA3ZTYwOGU0MWFkZDNiNmM5MGE3ZDQ3NDdiNjQ0YzQzZjI5OGFmNzIxZWI1N2EzZDcwYzQ2YTY4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.cqKx2vP8QkknprLLDfxikJSMxGc14-w6Sb1SJLgFXuc)
`mounted() {
const timeFormat = "YYYY-MM-DD HH:mm:ss";
const ctx = this.$refs.canvas.getContext("2d");
this.chartConfig = {
type: "line",
data: {
labels: [],
datasets: [],
},
options: {
title: {
text: "Chart.js Time Scale",
},
elements: {
line: {
tension: 0.001,
},
point: {
//pointStyle: (ctx) => console.log(ctx),
radius: 0,
hoverRadius: 5,
},
},
legend: {
display: false,
position: "bottom",
},
animation: {
duration: 0,
},
scales: {
xAxes: [
{
type: "time",
time: {
parser: timeFormat,
round: "second",
tooltipFormat: timeFormat,
},
scaleLabel: {
display: false,
labelString: "시간",
},
ticks: {
display: false,
callback(_, index, values) {
const value = values[index];
return [
window.moment(value).format("HH"),
window.moment(value).format("mm"),
];
},
},
},
],
yAxes: [
{
scaleLabel: {
display: false,
labelString: "사용율(%)",
},
ticks: {
display: false,
min: 0,
max: 100,
},
},
],
},
},
};
this.lineChart = new Chart(ctx, this.chartConfig);
},
methods: {
updateChart() {
// 서버에서 최초 값 조회 시. 차트 데이터 셋팅.
const config = this.chartConfig;
},
};`
Beta Was this translation helpful? Give feedback.
All reactions