Question

我的csv文件看起来像这样迄今为止，成功，失败，数 2015-03-30,95,65,160 2015-03-31,10,8,18 2015-04-01,38,20,58 我必须在X轴上显示日期。

我的代码看起来像我要做的修改，请在此建议我

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>


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


        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
        $(document).ready(function() {

            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: 'statistics'
                },
                xAxis: {

                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'hits'
                    }
                },
                series: []
            };




            $.get('user_profile19.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 if(lineNo==0) {
                        var series = 
                        { 
                            data: []
                        };
                        $.each(items, function(itemNo, item) 
                        {
                            if (itemNo == 0) 
                            {
                                series.name = item;
                            } 
                            else 
                            {
                                series.data.push(parseFloat(item));
                        }
                        });

                        options.series.push(series);
                    }
                    else
                    {
                    }
                });

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


        });
        </script>

    </head>
    <body>

        <div style="width: 800px; margin: 2em auto; padding: 1em; border: 1px solid red; border-radius: 0.5em">
            NOTE: This demo shows a way of manually parsing CSV. As of Highcharts 4.0 this is
            not necessary for simple CSV files, as this functionality is built into the 
            <a href="http://api.highcharts.com/#data">Data module</a>.
        </div>

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


    </body>
</html>

Answer 1

您的代码中存在一些错误。首先，看起来您打算从第一行获取类别，然后从所有其他行中获取它。然后，您只需要创建每个行的第一项（始终是日期）来创建类别。显然这不是你想要的。

这个小提琴：http://jsfiddle.net/hibiscus/ec8gm8oq/做了我相信你想做的事情。 CSV数据只是作为变量添加，以简化操作。相关代码是：

var categoryIndex = 0;
var categories = [];

$.each(lines, function(lineNo, line) 
            {                    
                var items = line.split(',');
                // header line containes categories

                if (lineNo == 0) {                        
                    for (var i=1; i < items.length; i++) {
                        categories.push(items[i]);
                    }
                }

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

                    var series = 
                    { 
                        data: []
                    };

                    $.each(items, function(itemNo, item) 
                    {                            
                        if (itemNo == 0) 
                        {
                            series.name = categories[categoryIndex++];
                        } 
                        else 
                        {                                                                                            
                            series.data.push(parseFloat(item));
                        }
                    });
                    options.series.push(series);
                }

            });

如何在高位图中在X轴和y轴的其他列显示日期

1 个答案: