Question

图表出现但当我将类型更改为条形时它完全是空的，而当我保持水平条形时它完全黑色。

如果我试图削减我的数据只留下几行，那么水平条形图也会显示为空

<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

Answer 1

原因是在两个 CSV 文件中，字段没有用相同的字符分隔（逗号与分号）。

您可以考虑使用 d3-csv 而不是 d3.csv。

<块引用>

另请看一下这个答案：https://stackoverflow.com/a/27432751/2358409

谁知道为什么我不能正确绘制图表？

1 个答案: