Question

我创建了一个与datepicker相结合的图表。使用日期时间，开放，高，低，关闭所选日期从SQL数据库中获取数据。

我测试了每种方法来格式化xAxis，以便unzoomed tickinterval是1小时，如7:00 8:00 9:00 ......

我希望能够放大，以便最小间隔为1分钟，如7:00 7:01 7:02 ......

第一个问题是，对于每一个点，格式总是看起来像yyyy-mm-dd hh：mm：ss。更改tickInvterval后，它看起来更好但仍然错误，并且无法进行1分钟间隔的缩放功能。在将数据库拆分为单个日期和时间列后，我解决了日期问题，但显然高图仍然没有意识到它是一个时差，因为xAxis设置如下所示:(应显示hh：mm但图表显示hh：mm： SS）

xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'},
tickInterval: 60},

至少不打算拆分数据库，因为在查询过程中应该有一种方法可以用来将sql datetime更改为javatime格式。我现在搜索了几天，但没有找到正确的答案......也许是因为我对这些东西太新了...... :)

这是生成图表的代码：

$(document).ready(function() {
Highcharts.setOptions({
    global: {
    useUTC: false
    }
});
options = {
chart:{
zoomType: 'x',
    renderTo: 'container'
},
title: {
    text: 'Charts',
    style: {
    fontFamily: 'Verdana',
    fontSize: '20px',
    fontWeight: 'bold'
    }
    },
subtitle: {
    text: 'Chart 1',
 style: {
    fontFamily: 'Verdana',
    fontSize: '15px',
    fontWeight: 'bold'
    }
    },
xAxis: {
    type: 'datetime',
dateTimeLabelFormats: {
    minute: '%H:%M',
       },
tickInterval: 60
 },  
 yAxis: [{ 
        labels: {
                format: '{value}',
                style: {
                color: '#eeeeee'
                }
            },
            title: {
                text: 'Realtime',
                style: {
                color: '#eeeeee'
                }
            }
        }, { 
            title: {
    enabled: false,
            text: 'Graph1',
            style: {
                    color: '#4572A7'
                    }
            },
            labels: {
    enabled: false,
            format: '',
            style: {
            color: '#4572A7'
                }
            },
            opposite: true
        },{ 
            title: {
    enabled: false,
            text: 'Graph2',
            style: {
            color: '#89A54E'
                }
            },
    reversed: true,
            labels: {
    enabled: false,
            format: '',
            style: {
            color: '#89A54E'
                }
            },
            opposite: true
        }],
        tooltip: {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, 'rgba(96, 96, 96, .8)'],
                [1, 'rgba(16, 16, 16, .8)']
                ]
            },
        borderWidth: 1,
            borderColor: '#666666',
        crosshairs: true,        
        shared: true,
        useHTML: true,
        dateTimeLabelFormats: {
                minute: '%H:%M'},
            style: {
                padding: 10,
                fontWeight: 'bold'
            },
            formatter: function() {
                var s = '<b><span style="font-size: 12px; color: #cccccc">'+ this.x +'</span></b>';
                $.each(this.points, function(i, point) {
                s += '<br/><br/><span style="font-size: 16px; color: #cccccc">'+  point.series.name +': '+ point.y +'</span>';
            });
            return s;
        },
        shared: true
    },
  legend: 
  {
    enabled: true,
itemStyle: {
 color: '#eeeeee',
}
  },
  credits:
  {
  enabled: false
  },
  plotOptions: {
   spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },

     },
       area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, 'rgb(204, 204, 204)'],
                        [1, 'rgba(204, 204, 204,0)']
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        series: [{
       name: 'Realtime',
      type: 'area',
      color: '#cccccc',
       data: []
   }, {
       name: 'Graph1',
       type: 'spline',
       yAxis: 1,
       color: '#0077cc',
       enableMouseTracking: false,

       data: []
    }, {
       name: 'Graph2',
        type: 'spline',
       yAxis: 2,
        color: '#89A54E',
       enableMouseTracking: false,

       data: []
    }]
    }
    $.getJSON('data.php', function(json) {

    val1 = [];
    val2 = [];
    val3 = [];
    $.each(json, function(key,value) {
    val1.push([value[0], value[1]]);
val2.push([value[0], value[2]]);
    val3.push([value[0], value[3]]);
    });

    options.series[0].data = json['data1'];
    options.series[1].data = json['data2'];
    options.series[2].data = json['data3'];
    options.xAxis.categories = json['datetime'];
    chart = new Highcharts.Chart(options);
 });


});

$(function() {
    $( "#datepicker" ).datepicker({
       beforeShowDay: $.datepicker.noWeekends,
       dateFormat: "yy-mm-dd",
           onSelect: function(dateText, inst) { 
        $.getJSON("data.php?dateParam="+dateText, function(json){
    val1 = [];
    val2 = [];
val3 = [];
            $.each(json, function(key,value) {
             val1.push([value[0], value[1]]);
             val2.push([value[0], value[2]]);
             val3.push([value[0], value[3]]);

    });
    options.series[0].data = json['data1'];
    options.series[1].data = json['data2'];
    options.series[2].data = json['data3'];
    options.xAxis.categories = json['datetime'];

    chart = new Highcharts.Chart(options);
    });
      }
    });
});

这是php：

<?php
session_start();
?>

<?php
define('DB_SERVER',"localhost");
define('DB_NAME',"db");
define('DB_USER',"");
define('DB_PASSWORD',"");


$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD);

if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db(DB_NAME, $con);

if (isset($_GET["dateParam"])) {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE datetime LIKE '".$_GET["dateParam"]."%'");
} else {
$sql = mysql_query("SELECT datetime, open, high, close FROM data WHERE DATE(datetime) = CURDATE()");
}

while($r = mysql_fetch_array($sql)) {

$result['datetime'][] = $r['datetime'];
$result['data1'][] = $r['open'];
$result['data2'][] = $r['close'];
$result['data3'][] = $r['high'];

}

print json_encode($result, JSON_NUMERIC_CHECK);

mysql_close($con);
?>

Answer 1

您的tickInterval非常小。它设置为60毫秒。如果您希望tickInterval为一分钟，则需要将其设置为乘以10k：

tickInterval: 60 * 10000

这应该解决它，因为即使你说使用'%H:%M'你的分辨率要小得多。

编辑：所以，一些事情。见jsFiddle。您需要设置一个开始时间（总是很好的练习），如果不提供{x, y}数据，则需要告诉它数据点之间有多长时间。为此，您可以：

series: [{
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 60000, //every minute there is data.
    name: 'Realtime',
    type: 'area',
    data: [8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500, 8500]
}]

重要的部分是pointStart和pointInterval。我还在chart: {}选项中将最大缩放级别设置为一分钟：

maxZoom: 60000

Answer 2

您可以使用tickPositioner来动态http://api.highcharts.com/highstock#xAxis.tickPositioner

来计算滴答

Answer 3

我测试了你的修正，看起来很棒jsfiddle，但我遇到的问题比以前更多...... 现在我的时间看起来像“1262304000000”......并且标签缩放功能仍然不起作用...... 你写道：“你需要设置一个开始时间（总是很好的练习），如果不提供{x，y}数据，你需要告诉它数据点之间有多长时间。” 对不起，但我在途中更改了xAxis数据以找到解决方案...... 旧的和可能正确的版本是从sql数据库中捕获timeformat，正如你在我的代码中看到的那样：

xAxis: { categories: [],

和

options.xAxis.categories = json['datetime'];

但这也会导致同样的问题。

Answer 4

非常感谢，最后我得到了大部分功能，问题是

options.xAxis.categories = json['datetime'];

但是...... :) 我正在收到市场数据，其中每天都会丢失一些微小的数据，例如7：00,7：01,7：03等等。并且使用xAxis日期时间格式Highchart没有意识到这一点并且只计算时间，因此最后显示的刻度例如是21:40而不是应该是22:00。这就是我想从数据库日期时间收到x值的原因，我显然无法做到这一点。有人有想法吗？

这是到目前为止的代码，工作得非常好：

$(document).ready(function() {
Highcharts.setOptions({

});

    options = {
      chart: 
  {
    backgroundColor: {
     linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
     stops: [
        [0, 'rgb(51, 51, 51)'],
        [1, 'rgb(16, 16, 16)']
     ]
  },
    borderColor: '#666666',
    borderWidth: 1,
    borderRadius: 0,
    zoomType: 'x',
    maxZoom: 60000,
    renderTo: 'container'
  },

  title: 
  {
    text: 'Realtime',
    margin: 50,
    style: {
        fontFamily: 'Verdana',
        fontSize: '20px',
        fontWeight: 'bold',
        color: '#cccccc'
        }
  },
        subtitle: 
  {
    text: 'Chart 1',
    style: {
        fontFamily: 'Verdana',
        fontSize: '15px',
        fontWeight: 'bold',
        color: '#CCCCCC'
        }
  },

         xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            minute: '%H:%M'
        }
    },
        yAxis: [{ // first yAxis
            labels: {
                format: '{value}',
                style: {
                    color: '#eeeeee'
                }
            },
            title: {
                text: 'Realtime',
                style: {
                    color: '#eeeeee'
                }
            }
        }, { // Second yAxis
            title: {
                enabled: false,
                text: 'Graph1',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                enabled: false,
                format: '',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        },{ // Third yAxis
            title: {
                enabled: false,
                text: 'Graph2',
                style: {
                    color: '#89A54E'
                }
            },
            reversed: true,
            labels: {
                enabled: false,
                format: '',
                style: {
                    color: '#89A54E'
                }
            },
            opposite: true
        }],
        tooltip: {
        xDateFormat: '%H:%M',
        shared: true,
        backgroundColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                [0, 'rgba(96, 96, 96, .8)'],
                [1, 'rgba(16, 16, 16, .8)']
                ]
            },
            borderWidth: 1,
            borderColor: '#666666',
            crosshairs: true,        
            useHTML: true,
            formatter: function() {
            var s = '<b><span style="font-size: 12px; color: #cccccc">'+ Highcharts.dateFormat('%H:%M', this.x) +' Uhr</span></b>';
            $.each(this.points, function(i, point) {
                s += '<br/><span style="font-size: 16px; color: #cccccc">'+ point.series.name +': '+ point.y +'</span>';
            });

            return s;
        }
    },

  legend: 
  {
    enabled: true,
    itemStyle: {
        color: '#eeeeee',
        }
  },
  credits:
  {
    enabled: false
  },
  plotOptions: {
  spline: {
                lineWidth: 4,
                states: {
                    hover: {
                        lineWidth: 5
                    }
                },
                marker: {
                    enabled: false
                },

                },
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                    stops: [
                        [0, 'rgb(204, 204, 204)'],
                        [1, 'rgba(204, 204, 204,0)']
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        series: [{
       pointStart: Date.UTC(2010, 0, 1, 8),
       pointInterval: 60000,
       name: 'Realtime',
       type: 'area',
       color: '#cccccc',
       data: []
   }, {
       pointStart: Date.UTC(2010, 0, 1, 8),
       pointInterval: 60000,
       name: 'Graph1',
       type: 'spline',
       yAxis: 1,
       color: '#0077cc',
       enableMouseTracking: false,

       data: []
    }, {
       pointStart: Date.UTC(2010, 0, 1, 8),
       pointInterval: 60000,
       name: 'Graph2',
       type: 'spline',
       yAxis: 2,
       color: '#89A54E',
       enableMouseTracking: false,

       data: []
    }]
    }
    $.getJSON('data.php', function(json) {

    val1 = [];
    val2 = [];
    val3 = [];
    $.each(json, function(key,value) {
    val1.push([value[0], value[1]]);
    val2.push([value[0], value[2]]);
    val3.push([value[0], value[3]]);
   });

    options.series[0].data = json['data1'];
    options.series[1].data = json['data2'];
    options.series[2].data = json['data3'];
    chart = new Highcharts.Chart(options);
 });


});

$(function() {
    $( "#datepicker" ).datepicker({
      beforeShowDay: $.datepicker.noWeekends,
      dateFormat: "yy-mm-dd",
      onSelect: function(dateText, inst) { 
        $.getJSON("data.php?dateParam="+dateText, function(json){
            val1 = [];
            val2 = [];
            val3 = [];
            $.each(json, function(key,value) {
            val1.push([value[0], value[1]]);
            val2.push([value[0], value[2]]);
            val3.push([value[0], value[3]]);

    });
    options.series[0].data = json['data1'];
    options.series[1].data = json['data2'];
    options.series[2].data = json['data3'];

    chart = new Highcharts.Chart(options);
        });
      }
    });
});

Highcharts xAxis无法获得正确的时间格式

4 个答案: