[英]Line chart doesn't work with type time chart.js
我将 chart.js 与 React 一起使用,我无法弄清楚为什么折线图不适用于type: 'time'
,也许我可能会遗漏一些东西:
import React from "react";
import { Line } from "react-chartjs-2";
const startDate = new Date(2020, 4, 20);
const json = '{"responses":[{"count":"73","rows":[{"values":["1"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["0"]},{"values":["1"]},{"values":["6"]},{"values":["7"]},{"values":["5"]},{"values":["8"]},{"values":["9"]},{"values":["2"]},{"values":["1"]},{"values":["1"]},{"values":["1"]},{"values":["6"]},{"values":["3"]},{"values":["0"]},{"values":["20"]},{"values":["9"]},{"values":["3"]},{"values":["2"]},{"values":["1"]},{"values":["13"]},{"values":["3"]},{"values":["13"]},{"values":["13"]},{"values":["7"]},{"values":["12"]},{"values":["0"]}]}]}';
const values = JSON.parse(json).responses[0].rows.map(row => row.values[0]);
const options = {
legend: {
display: false
},
hover: {
mode: "index",
intersect: false,
animationDuration: 0
},
scales: {
yAxes: [{ position: "right" }],
xAxes: [
{
gridLines: { display: false },
type: "time",
time: {
parser: "MMM D",
unit: "day",
unitStepSize: 5,
displayFormats: {
day: "MMM D"
}
},
ticks: {
min: startDate, //May 20
max: new Date()
}
}
]
},
tooltips: {
mode: "x-axis"
}
};
const data = {
datasets: [
{
label: "data",
fill: false,
data: values,
backgroundColor: "pink",
borderWidth: 2,
lineTension: 0,
borderColor: "pink",
hoverBorderWidth: 2,
pointBorderColor: "rgba(0, 0, 0, 0)",
pointBackgroundColor: "rgba(0, 0, 0, 0)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "pink",
showLine: true
}
]
};
const LineChart = () => {
return (
<div style={{ maxWidth: 1024, margin: "32px auto" }}>
<Line data={data} options={options} />
</div>
);
};
export default LineChart;
您应该像这样生成特定的数据集:
const values = JSON.parse(json).responses[0].rows.map((row, index) => {
let date = new Date(2020, 4, 20);
date.setDate(startDate.getDate() + index)
return {
y: row.values[0],
x: date
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.