我想用cookie中的数据在chart.js中显示图表。我可以用console.log看到这些值。但我不知道是什么原因导致数据没有显示在图表中。
我使用一个函数来读取cookie，如下所示。
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
所以我测试将数据放入cookie中，并读取为：
document.cookie="dat=60, 80, 81, 56, 55, 40";
var dat=readCookie(dat);
一切都很好，没有错误，但没有数据加载到图表中。请看一下这里的小提琴：http://jsfiddle.net/uewnjhgr/1/
我在浏览器上测试了您的代码，发现您必须通过；字符串"到CCD_ 2函数。此外，在返回值后，您应该将其转换为Array以在chart.js数据中使用。我是在JSON.parse的帮助下完成的。下面是适用于我的代码：
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
document.cookie="dat=60, 80, 81, 56, 55, 40";
var dat = readCookie("dat");
var datArr = JSON.parse("[" + dat + "]");
console.log(datArr);
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: datArr//ref from cookie
}
]
};
var ctx = document.getElementById("myChart1").getContext("2d");
const myLine = new Chart(ctx, {
type: 'line',
data: chartData,
showTooltips: false,
options: {
scales: {
y: {
stacked: true
}
}
}
});
// Uncaught TypeError: (new Chart(...)).Line is not a function
/*
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
});
*/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="myChart1" height="300" width="500"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
<script src="cod.js"></script>
</body>
</html>我没有使用您的图表设置，因为它会给我Uncaught TypeError: (new Chart(...)).Line is not a function错误。