JS Highchart導入CSV數據

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，將日期解析為時間戳（通過ie 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 個解決方案

解決方案1
2 已采納 2014-03-17 11:18:07

解決方案2
0 2014-03-18 18:21:08

JS Highchart導入CSV數據

問題描述

2 個解決方案

解決方案1 2 已采納 2014-03-17 11:18:07

解決方案2 0 2014-03-18 18:21:08

解決方案1
2 已采納 2014-03-17 11:18:07

解決方案2
0 2014-03-18 18:21:08