Question

我正在尝试使用HighChart生成一个简单的折线图。源代码如下。挑战在于我在屏幕上获得了我的X轴和Y轴，但图表本身却缺失了。当我在屏幕上移动光标时，我可以看到屏幕上显示的X和Y值。我试图调试该程序，但我无法找到解决方案。有人可以指导我吗？

此致

萨钦

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        
        <!--[if IE]>
            <script type="text/javascript" src="../js/excanvas.compiled.js"></script>
        <![endif]-->
        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line'
                },
                title: {
                    text: 'Pollution Level'
                },
                xAxis: {
                    categories: [''],
                        title: {
                            text: 'Date'
                        }
                },
                yAxis: {
                    title: {
                        text: 'Pollution %'
                    }
                 },
                series: []
            };
            

            $.get('data/graphs/pollution.csv', function(data) {
            window.alert(data);    
            // Split the lines
            var lines = data.split('\n');
            window.alert(lines);
            lines = lines.map(function(line) {
                var data = line.split(',');
                data[1] = parseFloat(data[1]);
                return data;
            });

            window.alert(lines);
            var series = {
                data: lines
            };
            options.series.push(series);

            var chart = new Highcharts.Chart(options);
                    });
    });
</script>

    </head>
    <body >
        <div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
            </body>
</html>

＆＃13;

2016年3月1日更新

我修改了程序如下。我仍然无法获得折线图。有趣的是，如果我从＆＃39; line＆＃39;更改图表类型到了＆＃39;列＆＃39;我可以看到一张图表。不确定问题。请指教。

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="js/highcharts.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        
        <!--[if IE]>
            <script type="text/javascript" src="../js/excanvas.compiled.js"></script>
        <![endif]-->
        <!-- 2. Add the JavaScript to initialize the chart on document ready -->
        <script type="text/javascript">
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'line'
                },
                title: {
                    text: 'Pollution Level'
                },
                xAxis: {
                    categories: [''],
                        title: {
                            text: 'Date'
                        }
                },
                yAxis: {
                    title: {
                        text: 'Pollution %'
                    }
                 },
               series: [ {
                    plotLines: [{
                            color: '#000000'
                        }],
                       data: []
                    }]
            };
            

            $.get('data/graphs/pollution.csv', function(data) {
            window.alert(data);    
            // Split the lines
            var lines = data.split('\n');
            window.alert(lines);
            var series = {
                      data: [],
                      name: 'serie1'  
            };
            lines = lines.map(function(line) {
                var data = line.split(',');
                if (data[0] != "DATE"){
                    options.xAxis.categories.push(data[0]);
                    data1 = parseFloat(data[1]);
                    series.data.push(parseFloat(data[1]));
                    return data;
                    }
                });
                options.series.push(series);
                var chart = new Highcharts.Chart(options);
            });

    });
</script>

    </head>
    <body >
        <div id="container" style="width: 610px; height: 610px; margin: 0 auto"></div>
        <?php
        ?>
    </body>
</html>

＆＃13;

Answer 1

确保您获取的是有效值而不是字符串：请查看此部分：

<input type="file" />

问：你能分享一下你的CSV（pollution.csv）吗？

感谢您的数据：请检查以下example 解析部分是：

  lines = lines.map(function(line) {
                var data = line.split(',');
                data[1] = parseFloat(data[1]);
                return data;
            });

如您所见，我从数据中隔离了标题（DATE，LVL），下一步是在dataYAxis数组中保存数据：date first和data second。我在xAxis中使用'datetime'在xAxis'标签中显示日期。

使用HighChart的简单折线图

1 个答案: