0

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

1、Xaxis上的日期在一行中显示为“2013-04-23 21:07:40”；未排序的天、小时



    

  1. 温度值四舍五入到最接近的值
示例 19.44 - 图 19
    2. 

  2. 我没有按钮“缩放”结束窗口“从”“到”
    3. 

  3. 我没有范围选择器
我想要这个网站中的图表：
http://www.highcharts.com/stock/demo/data-grouping
我不是一个好的程序员，但我会尝试。
我在这个论坛中发现了类似的问题，但解决方案不起作用
有人请帮忙。
此致





CSV 中的数据格式如下：
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

 


我的 HTML 代码


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

3 回答 3

0

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

于 2013-06-29T09:08:41.357 回答
0

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

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

于 2013-06-24T11:14:10.430 回答
0

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]));
于 2014-04-06T09:53:23.557 回答