Question

这是继续我的问题here

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

所以，最后，我有一个想法在＆＃34; d3.csv＆＃34;内创建一个图表。功能，其中我们可以添加高级功能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

我的控制台正在显示＆＃34; apples＆＃34;正确[8,3]。我在屏幕上显示一个空图表，只显示轴，内部没有任何内容，x轴和y轴元素也互换。

我在这里做错了什么？是全局变量 - 苹果，而不是在高级图表功能中访问吗？

更新：

找到答案，但只显示一个号码。我还有两个问题：

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

Answer 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）!!

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

更新：

改变数据：[apples] - ＆gt;数据：苹果（格式正确）

致谢：PawelFus

使用d3.csv创建Highcharts图表

1 个答案: