javascript - 谁知道为什么我不能正确绘制图表?
问题描述
图表出现了,但是当我将类型更改为条形时它完全是空的,当我保持水平条时它完全是黑色的。
如果我尝试剪切我的数据,只留下几行,则水平条形图也显示为空
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<style>
#wrapper {
height: 1000px;
}
</style>
<body>
<div id="wrapper">
<canvas id="chart"></canvas>
</div>
<SCRIPT LANGUAGE=javascript>
function makeChart(products)
var Counter = products.map(function(d) {
return d.Counter;
});
var CumVol = products.map(function(d) {
return +d.CumVol;
});
var chart = new Chart('chart', {
type: "horizontalBar",
options: {
maintainAspectRatio: true,
legend: {
display: false
}
},
data: {
labels: Counter,
datasets: [
{
data: CumVol
}
]
}
});
}
// Request data using D3
d3
.csv("http://localhost:8080/cumvol.csv")
.then(makeChart);
</SCRIPT>
</body></html>
Counter;CumVol
1;0.009999999776482582
2;0.029999999329447746
3;0.06999999843537807
4;0.12999999709427357
5;0.13999999687075615
6;0.14999999664723873
7;0.1599999964237213
这是我的 csv 文件 cumvol 的几行
尝试使用另一个文件,一切都正确显示(我的意思是更改列的名称):
Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
Pete Sampras,286,Male
Ivan Lendl,270,Male
Jimmy Connors,268,Male
Chris Evert,260,Female
Novak Djokovic,223,Male
解决方案
原因是在两个 CSV 文件中,字段没有用相同的字符分隔(逗号与分号)。
推荐阅读
- entity-framework - 如何通过 Entity Framework 和 JetEntityFrameworkProvider 连接 Access (*. Accdb)?
- c# - LINQ 按多个属性分组并创建字典
- python - 错误:“期望用双引号括起来的属性名称:第 2 行第 1 列(字符 2)”
- java - 将 exoplayer 2.8.4 迁移到 2.9.0
- html - Wordpress Gravity PDF CSS 专栏
- php - 防止文本在周围换行使用 html2pdf 的标签
- java - Android 处理程序未使用 HandlerThread 接收消息
- reactjs - 在ReactJS中动态生成的html上触发按钮的onClick事件
- java - 在 Chrome Android 中进入全屏的视频播放器停止流式传输
- apache-kafka - Kafka 手动 ackMode MANUAL_IMMEDIATE 如果不确认怎么办