Javascript Highcharts分组类别数据csv

大家好，我有一个条形图示例：

如您所见，它具有分组类别

现在我希望能够通过csv或xml导入数据。 我遇到了highcharts的数据模块，但我认为这不是为分组类别设计的

到目前为止，我所取得的成就是：

HTML标题：

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="exporting.js"></script>
<script type="text/javascript" src="grouped-categories.js"></script>
<script type="text/javascript" src="data.js"></script>

<script type="text/javascript">
$.get('data.csv', function(csv) {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        data: {
            csv: csv,
            itemDelimiter: ';'
        },

        title: {
            text: 'Roadmap'
        },
        yAxis: {
            title: {
                    text: 'Date'
                },
            labels: {
                    style: {
                        fontSize: '12px'
                    }
            },
            type: 'datetime',
            min : Date.UTC(2015, 10, 1),
            max : Date.UTC(2021, 01, 1),
            tickInterval: 30.41667 * 24 * 3600 * 1000
        }
    });
});
</script>

是否可以使用csv或xml生成分组类别条形图

我在想这样的事情：

Project1; Phase 1; Task 1, Value
Project1; Phase 2; Task 1, Value
Project1; Phase 2; Task 2, Value
Project1; Phase 3; Task 1, Value

然后尝试获取此输出，以便highcharts可以使用它：

categories: [{
      name: "Project 1",
      categories: [{
        name: "Phase 1",
        categories: ["Task 1"]
      }, {
        name: "Phase 2",
        categories: ["Task 1"]
      }, {
        name: "Phase 3",
        categories: ["Task 1", "Tas k2"]
      }]

插件需要Highcharts不直接支持的类别格式。数据模块是Highcharts官方插件，所以默认情况下或使用某些可用设置时，它不会像这样工作。解析CSV数据-创建序列数据数组和类别对象可能是解决此问题的方法

下面是该解析器的示例：

---

我认为这种类型的分类比highcharts更像html和css。你可以对此进行深入研究。因此，在第一个屏幕上，它应该对project1和project2进行计数，然后您可以单击其中一个来查看不同的阶段及其计数，单击时显示任务的计数。分组类别插件需要Highcharts不直接支持的类别格式。数据模块是Highcharts官方插件，所以默认情况下或使用某些可用设置时，它不会像这样工作。您应该解析CSV数据，并使用自定义代码创建序列数据数组和类别对象。如果需要帮助，请告诉我您在实施此解决方案时是否遇到任何问题。@RahulSharma Drilldown是一个选项。是否有可能使用cvs数据导入深入分析？@KacperMadej如果能获得一些帮助来实现一个带有series的定制解决方案，那就太好了。我必须承认，我以前从来没有放弃过。哇，我印象深刻。我原以为你会给我一个暗示，但那是完全有效的。非常感谢。

categories: [{
      name: "Project 1",
      categories: [{
        name: "Phase 1",
        categories: ["Task 1"]
      }, {
        name: "Phase 2",
        categories: ["Task 1"]
      }, {
        name: "Phase 3",
        categories: ["Task 1", "Tas k2"]
      }]

  $.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');
    var series = [];

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
      var items = line.split(';'),
        hasThisCategory = false,
        categoryIndex = -1,
        categoryPath = options.xAxis.categories;

            //add data point to series data
      options.series[0].data.push(parseInt(items[3]));

            // I. level of categories
      Highcharts.each(categoryPath, function(category, i) {
        if (category.name === items[0]) {
          hasThisCategory = true;
          categoryIndex = i;
        }
      });
      if (!hasThisCategory) {
        categoryPath.push({
          name: items[0],
          categories: []
        });
      }
      if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;

            // II. level of categories
      categoryPath = categoryPath[categoryIndex].categories;
      hasThisCategory = false;
      categoryIndex = -1;

      Highcharts.each(categoryPath, function(category, i) {
        if (category.name === items[1]) {
          hasThisCategory = true;
          categoryIndex = i;
        }
      });
      if (!hasThisCategory) {
        categoryPath.push({
          name: items[1],
          categories: []
        });
      }
      if (categoryIndex === -1) categoryIndex = categoryPath.length - 1;

            // III. level of categories
      categoryPath = categoryPath[categoryIndex].categories;
      hasThisCategory = false;
      categoryIndex = -1;

      Highcharts.each(categoryPath, function(category, i) {
        if (category === items[2]) {
          hasThisCategory = true;
        }
      });
      if (!hasThisCategory) {
        categoryPath.push(items[2]);
      }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
  });