Question

我正在研究highcharts并测试其分析大型数据集的功能。事情是我可以想象的，高图表不会按类别对数据进行分组，这与d3不同。我正在使用带有高图的csv数据文件。

例如，我可以绘制这个数据集：

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Janet,3,16,13,15
Joe,8,8,8,8

，结果图表如下：

现在，当我向数据集添加另一行数据时，例如

    Joe,4,4,4,4

这将创建一个图表，其中包含类别的另一个条形段。我需要它在标准BI工具/ excel中进行分组，因此我只为Joe的每个类别设置一个条。

使用highcharts API有一些巧妙的方法吗？

这是我的HTML代码：

    <!-- 1. Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>

            <!-- 3. Add the container -->
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

    <script src='testgraphs.js' type='text/javascript'></script>    
</body>

JS代码

$(document).ready(function() {


        var options = {
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Category Attrition1'
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Units'
                }
            },
            series: []
        };


        $.get('newdata.csv', function(data) {
            // Split the lines
            var lines = data.split('\n');
            $.each(lines, function(lineNo, line) {
                var items = line.split(',');

                // header line containes categories
                if (lineNo == 0) {
                    $.each(items, function(itemNo, item) {
                        if (itemNo > 0) options.xAxis.categories.push(item);
                    });
                }

                // the rest of the lines contain data with their name in the first position
                else {
                    var series = { 
                        data: []
                    };
                    $.each(items, function(itemNo, item) {
                        if (itemNo == 0) {
                            series.name = item;
                        } else {
                            series.data.push(parseFloat(item));
                        }
                    });

                    options.series.push(series);

                }

            });

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


    });

感谢您的期待。

在highcharts中对CSV数据进行分组

0 个答案: