Javascript ChartJS日期重新格式化以供使用？
我的chartjs代码有一些问题。我有一个日期提要，可以将数据发送到下面的图表。当转换到列表时，分数和日平均值都很好。我在日期上有困难。我收到的数据格式在“const test”变量中，我需要它在“const dates”变量中。基于项目的性质，我不能每次都把它们打印出来。解决此问题的最佳方法是什么？谢谢Javascript ChartJS日期重新格式化以供使用？,javascript,html,responsive-design,chart.js,Javascript,Html,Responsive Design,Chart.js,我的chartjs代码有一些问题。我有一个日期提要，可以将数据发送到下面的图表。当转换到列表时，分数和日平均值都很好。我在日期上有困难。我收到的数据格式在“const test”变量中，我需要它在“const dates”变量中。基于项目的性质，我不能每次都把它们打印出来。解决此问题的最佳方法是什么？谢谢 <!DOCTYPE html> <html lang="en" dir="ltr"> <head>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sentiment</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
</head>
<style>
.bar { fill: steelblue; }
body { background-color: #1c142c; }
</style>
<body>
<div>
<h1 style="font: 200; color: white;">What are people saying on social media?</h1>
<canvas id="canvas""></canvas>
</div>
</body>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
const test = ['2020-12-24', '2020-12-25', '2020-12-26', '2020-12-27', '2020-12-28', '2020-12-29', '2020-12-30', '2020-12-31']
const dates = ['2020-12-24','2020-12-25','2020-12-26','2020-12-27','2020-12-28','2020-12-29','20201-12-30','2020-12-31']
const score = [-2, -40, 81, -31, 34, -35, -24, -30]
const day_7_average = [0, -6, 3, -2, 5, 5, 0, -7]
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
const colours = score.map((value) => value < 0 ? 'rgb(255, 99, 132)' : 'rgb(75, 192, 192)');
var chartData = {
labels: dates,
datasets: [{
type: 'line',
label: '7 day average',
backgroundColor: 'rgb(201, 203, 207)',
borderColor: 'rgb(201, 203, 207)',
borderWidth: 2,
fill: false,
data: day_7_average,
},
{
type: 'bar',
label: 'Sentiment Score',
backgroundColor: colours,
data: score
}]
};
window.onload = function() {
window.myMixedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
tooltips: {
mode: 'index',
intersect: false,
}
}
});
};
情绪
.bar{fill:steelblue；}
正文{背景色：#1c142c；}
人们在社交媒体上说什么？
嗯。。。这可能是一个草率的解决方法，但请尝试以下方法：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sentiment</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
</head>
<style>
.bar { fill: steelblue; }
body { background-color: #1c142c; }
</style>
<body>
<div>
<h1 style="font: 200; color: white;">What are people saying on social media?</h1>
<canvas id="canvas"></canvas>
</div>
</body>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
const test = [''2020-12-24'',
''2020-12-25'',
''2020-12-26'',
''2020-12-27'',
''2020-12-28'',
''2020-12-29'',
''2020-12-30'',
''2020-12-31''];
var i;
dates_tmp = [];
for (i = 0; i < test.length; i++) {
dates_tmp.push(String(test[i].replaceAll("'", "")));
}}
const dates = dates_tmp;
const score = [-2, -40, 81, -31, 34, -35, -24, -30]
const day_7_average = [0, -6, 3, -2, 5, 5, 0, -7]
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
const colours = score.map((value) => value < 0 ? 'rgb(255, 99, 132)' : 'rgb(75, 192, 192)');
var chartData = {
labels: dates,
datasets: [{
type: 'line',
label: '7 day average',
backgroundColor: 'rgb(201, 203, 207)',
borderColor: 'rgb(201, 203, 207)',
borderWidth: 2,
fill: false,
data: day_7_average,
},
{
type: 'bar',
label: 'Sentiment Score',
backgroundColor: colours,
data: score
}]
};
window.onload = function() {
window.myMixedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
tooltips: {
mode: 'index',
intersect: false,
}
}
});
};
</script>
</html>
情绪
.bar{fill:steelblue；}
正文{背景色：#1c142c；}
人们在社交媒体上说什么？
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
常数测试=[''；2020-12-24'；'，
“2020-12-25”，
“2020-12-26”，
"2020-12-27",，
“2020-12-28”，
"2020-12-29",，
"2020-12-30",，
“'；2020-12-31'；”；
var i；
日期_tmp=[]；
对于（i=0；i值<0？'rgb（255，99，132）''rgb（75，192，192）'；
var图表数据={
标签：日期，
数据集：[{
键入：“行”，
标签：“7天平均值”，
背景颜色：“rgb（201203207）”，
边框颜色：“rgb（201203207）”，
边界宽度：2，
填充：假，
数据：7天平均值，
},
{
类型：'bar'，
标签：“情绪分数”，
背景颜色：颜色，
数据：得分
}]
};
window.onload=函数（）{
window.myMixedChart=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：{
回答：是的，
工具提示：{
模式：“索引”，
交集：错，
}
}
});
};
（哦，顺便说一句：第16行出现了一个意想不到的“错误”嗯……这可能是一个草率的解决方法，但请尝试以下方法：
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Sentiment</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
</head>
<style>
.bar { fill: steelblue; }
body { background-color: #1c142c; }
</style>
<body>
<div>
<h1 style="font: 200; color: white;">What are people saying on social media?</h1>
<canvas id="canvas"></canvas>
</div>
</body>
<script>
var ctx = document.getElementById("canvas").getContext('2d');
const test = [''2020-12-24'',
''2020-12-25'',
''2020-12-26'',
''2020-12-27'',
''2020-12-28'',
''2020-12-29'',
''2020-12-30'',
''2020-12-31''];
var i;
dates_tmp = [];
for (i = 0; i < test.length; i++) {
dates_tmp.push(String(test[i].replaceAll("'", "")));
}}
const dates = dates_tmp;
const score = [-2, -40, 81, -31, 34, -35, -24, -30]
const day_7_average = [0, -6, 3, -2, 5, 5, 0, -7]
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
const colours = score.map((value) => value < 0 ? 'rgb(255, 99, 132)' : 'rgb(75, 192, 192)');
var chartData = {
labels: dates,
datasets: [{
type: 'line',
label: '7 day average',
backgroundColor: 'rgb(201, 203, 207)',
borderColor: 'rgb(201, 203, 207)',
borderWidth: 2,
fill: false,
data: day_7_average,
},
{
type: 'bar',
label: 'Sentiment Score',
backgroundColor: colours,
data: score
}]
};
window.onload = function() {
window.myMixedChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
responsive: true,
tooltips: {
mode: 'index',
intersect: false,
}
}
});
};
</script>
</html>
情绪
.bar{fill:steelblue；}
正文{背景色：#1c142c；}
人们在社交媒体上说什么？
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
常数测试=[''；2020-12-24'；'，
“2020-12-25”，
“2020-12-26”，
"2020-12-27",，
“2020-12-28”，
"2020-12-29",，
"2020-12-30",，
“'；2020-12-31'；”；
var i；
日期_tmp=[]；
对于（i=0；i值<0？'rgb（255，99，132）''rgb（75，192，192）'；
var图表数据={
标签：日期，
数据集：[{
键入：“行”，
标签：“7天平均值”，
背景颜色：“rgb（201203207）”，
边框颜色：“rgb（201203207）”，
边界宽度：2，
填充：假，
数据：7天平均值，
},
{
类型：'bar'，
标签：“情绪分数”，
背景颜色：颜色，
数据：得分
}]
};
window.onload=函数（）{
window.myMixedChart=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：{
回答：是的，
工具提示：{
模式：“索引”，
交集：错，
}
}
});
};
（哦，顺便说一句：第16行出现了一个意想不到的“错误”）请输入完整的代码好吗？我似乎无法让它运行。谢谢你还犯了一些其他错误（标记未关闭，附加”）。它对我来说是这样的…希望它对你有用：）这太棒了。多亏了Nisch23，你帮我省去了这么多头疼的事。没问题！：）请注意，我将常量测试中的元素改为字符串（我希望你在最终版本中将它们作为字符串接收？）。如果没有，我们将不得不检查它是否在最后工作…但很高兴我现在能提供帮助。我注意到。在后端自动转换为字符串以使推送格式正确时遇到问题。str（函数）似乎没有像我希望的那样工作。你能输入完整的代码吗？我似乎无法运行此程序。谢谢！！你还有几个错误（标记未关闭，附加）。对我来说是这样的。。。希望对你有用：）这太棒了。你懂吗