Question

Hy Guys

我是JS的新手，我一直试图通过编程图表来练习一下。到目前为止它运作良好。我用修复数据制作了一些图表。现在我尝试从csv文件导入图表数据。嗯，它不起作用。我一整天都在阅读其他帖子并在谷歌上搜索过，但我没有clou，我做错了什么。你能帮我吗？

在x轴上，它应显示日期，在y轴上显示值。

csv数据示例：

01.02.2014 00：00：00; 0.450 01.02.2014 01：00：00; 0.780 01.02.2014 02：00：00; 0.746

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>myChart</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var config = {
                chart: {
                    renderTo: 'chart',
                    type: 'line',
                    zoomType: 'xy'
                },
                title: {
                    text: 'TestChart'
                },
                subtitle: {
                    text: 'fix data'
                },
                xAxis: {
                    type: 'datetime',
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Values'
                    },
                    min: 0
                },
                plotOptions: {
                    series: {
                        marker: {
                            enabled: true
                        },
                        step: 'left'
                    }
                },
                legend: {
                    enabled: true,
                    align: 'center',
                    shadow: true
                },
                tooltip: {
                    valueDecimals: 2
                },

                series: []
            };

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

                $.each(lines, function (lineNo, line) {
                    var series = {
                        data: []
                    };
                        var x = line.split(';');
                        var dateAndTime = x[0];
                        var value = x[1];

                        var y = dateAndTime.split(' ');
                        var date = y[0];
                        var time = y[1];

                        var a = date.split('.');
                        var b = time.split(':');

                        var UTCDate = Date.UTC(a[0], a[1], a[2], b[0], b[1], b[2]);

                        config.xAxis.categories.push(UTCDate);
                        series.data.push(parseFloat(value));

                    config.series.push(series);

                });

                chart = new Highcharts.StockChart(config)
            });
        });

    </script>
</head>

<body>
    <script src="../../scripts/highstock.js"></script>
    <script src="../../scripts/exporting.js"></script>

    <div id="chart" style="min-width: 310px; height: 600px; margin: 0 auto"></div>

</body>
</html>

Answer 1

您需要加载csv，将日期解析为时间戳（即Date.UTC（）或Date.parse（））并提取y值。

http://www.highcharts.com/docs/working-with-data/preprocessing-data-from-a-file-csv-xml-json

Answer 2

我找到了解决方案。因为我对每个值都有一个给定的日期，所以我需要自己创建数据集：

series.data.push([Date.UTC(a[2], a[1], a[0], b[0], b[1], b[2],b[2]),parseFloat(value)]);

JS Highchart导入CSV数据

2 个答案: