Question

尝试所有将数据加载到Highstock图表结束的方法3天我的代码有些问题：

1. Date on Xaxis is displayed "2013-04-23 21:07:40" in line; not sorted day, hour 


Value  temperature is rounded to the nearest value
example 19.44 - in graph 19 
I dont have button "zoom" end window "from" "to"
i dont have range selector
I want graph like in this site:
http://www.highcharts.com/stock/demo/data-grouping
I'm not a good programmer, but I try.
I find in this forum similar problem, but solution not working
Somebody please help.
Best regards



The data in the CSV is formatted like so:
2013-04-23 21:07:40,19.44
2013-04-23 21:30:50,19.38
2013-04-23 22:00:11,19.69
2013-04-23 22:45:02,19.44
2013-04-23 23:00:03,19.75
2013-04-23 23:45:03,19.19
2013-04-24 00:00:12,19.13
2013-04-24 00:45:03,19
 

My HTML Code

<!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>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {

var c = [];
var d = [];
// Create a timer
var start = + new Date();
var options = {

                chart: {
            events: {
                    load: function(chart) {
                        this.setTitle(null, {
                            text: 'Built chart at '+ (new Date() - start) +'ms'
                    });
                }
            },
                renderTo: 'chart',
      defaultSeriesType: 'line',
                zoomType: 'x'                
            },
    rangeSelector: {
            buttons: [{
                type: 'day',
                count: 3,
                text: '3d'
            }, {
                type: 'week',
                count: 1,
                text: '1w'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, {
                type: 'month',
                count: 6,
                text: '6m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
    selected: 3
    },
            title: {
                text: 'Hourly temperatures in room'
            },
    subtitle: {
            text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
        },
            xAxis: {
                title: {
                    text: 'Date Measurement'
                },
                categories: c
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                }
            },
            series: [{
    name:'Temperature',
            data: d,
     tooltip: {
            valueDecimals: 2,
            valueSuffix: '°C'
            }
        }]
                };

$.get('dane.csv', function(data) {
        var lines = data.split('\n');
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
            c.push(items[0]);
            d.push(parseInt(items[1]));
        })
       var chart = new Highcharts.Chart(options);
});
});

</script>
</head>
   <body>
<script src="highstock.js" type="text/javascript"></script>
<script src="exporting.js" type="text/javascript"></script>
<div id="chart" style="height: 500px; min-width:500px"></div>
</body>
</html>

Answer 1

Highcharts使用时间戳（以毫秒为单位的时间），因此您需要解析数据或使用Date.UTC（）函数。

有关预处理的文章：http://docs.highcharts.com/#preprocessing

Answer 2

1。对不起，这对我来说太难了。但是，我有小小的成功，在我的图表中我有按钮缩放和按钮范围。。我的图表从1970年1月1日开始。这是开始时间戳，即未识别我的日期:( 2。我担心温度变化部分工具提示：{ valueDecimals：2， valueSuffix：'°C' 不工作。

Answer 3

valueDecimals：2不起作用，因为你要在int中解析你的值

d.push(parseInt(items[1]));

你应该使用

d.push(parseFloat(items[1]));

关于日期问题：如前所述，您需要解析前日期的日期：

 var dateAndTime = itmes[0].split(' ');    
 var dateParts = dateAndTime[0].split('-');    
 var timeParts = dateAndTime[1].split(':');
 var date = Date.UTC(parseInt(dateParts[2]), parseInt(dateParts[1]) - 1, parseInt(dateParts[0]), parseInt(timeParts[0]), parseInt(timeParts[1]));

使用highstock从CSV读取数据

3 个答案: