使用 d3.csv 创建 Highcharts 图表答案

【问题标题】：Highcharts chart creation using d3.csv使用 d3.csv 创建 Highcharts 图表
【发布时间】：2015-12-03 14:06:26
【问题描述】：

这是在继续我的问题here

我在使用本地文件系统中的 CSV 数据创建 highcharts 基本图表时遇到了很多问题，而没有使用服务器/框架和基本的 HTML/CSS/JS 等

所以，最后，我想到了在“d3.csv”函数中创建一个图表，我们可以在其中添加 highchart 函数 insdie d3.csv

但是，似乎有一些非常愚蠢的错误，我正在尝试使用非常基本的代码和表格。

HTML 代码只有容器 div 元素，

Javascript

d3.csv("test.csv", function(data) {
  data.forEach(function(d) {
    name = d.name,
    apples = +d.apples

  });
  console.log(data[2]);


  dataset = data;

  //display();

  console.log(dataset[0]);
  console.log(dataset[0].name);

   function push(a)
  {

   var filter = [];

   for (i=0; i<a.length ; i++)
    {
      filter.push(a[i].apples);
      //console.log (filter);
    }
    return filter;
  }

  window.apples = push(dataset);


  console.log(apples);


 $(function () { 
    $('#container').highcharts({
        chart: {
            type : 'bar'
        },
        title: {
            text: 'Fruit Consumption'
        },
        xAxis: {
            categories: [dataset[0].name, dataset[1].name]
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            data: apples 
            }
        ]
    });
})

});

test.csv： 名字，苹果约翰，8 简，3

我的控制台将“苹果”正确显示为 [8,3]。我在屏幕上得到一个空图，只显示轴，内部没有任何内容，而且 x 轴和 y 轴元素互换。

我在这里做错了什么？全局变量 - apples 是不是在 highcharts 函数中被访问？

更新：

找到答案，但只显示一个数字。我还有 2 个问题：

如何显示整个系列？
这是绘制高位图的好方法还是我以后会遇到很多问题？

【问题讨论】：

可能是异步加载文件 - 您是否尝试在 inside d3.csv 回调中创建图表？
@PawełFus ：是的，我在没有服务器/框架和基本 HTML/CSS 的“d3.csv”回调中绘制了许多 d3 图表。为了方便用户，您应该稍后在高图中添加这些功能。现在，你能帮我解决上面更新的两个问题吗？
说实话，这是第一次有人问（我）这样的功能 - 当然，如果它成为常见的请求，我们可能会将它添加到核心，或者至少创建一个插件那。您可以在我们的user voice 上提出想法。
回答您的问题：加载本地文件非常容易受到攻击，因此我认为这可以回答 #2 问题。就JS而言，您的代码很好。对于 #1：更改 data : [apples] -> data: apples（Highcharts 格式错误）。
非常感谢@PawełFus。最后能够加载和绘制图表。但是，您能否进一步说明问题可能是什么？以后会造成多大的问题？

标签： javascript jquery csv d3.js highcharts

【解决方案1】：

我自己找到了解决方案。

Highcharts 期望函数以它们的格式进行解析（控制台中的 Highcharts 错误 14）

把我上面的函数改成这个，

 for (i=0; i<a.length ; i++)
    {
      x = a[i].apples;
      y = parseFloat(x)
      filter.push(y);
    }
    return filter;
  }

  window.apples = push(dataset);

系列部分：

 series: [{
            data : [apples]
            }
        ]

终于，现在给我一个带有一个条形图（John，8）的图表！！

第二个号码还没有加载，如果有人想帮忙，请在下面评论。

更新：

改变了数据：[苹果] -> 数据：苹果（正确格式）

致谢：PawelFus

【讨论】：