Question

我创建了一条共享xAxis的线条和条形图。但由于某种原因，它选择显示值而不是日期，即使我以标准方式提供它。

enter image description here

我在这里缺少什么？

$(function () {

var options = {
    chart: {
        renderTo: 'container',
    },
    navigator:{
        enabled:true
    },
    scrollbar: {
        enabled:true
    },

    rangeSelector: {
        enabled: true,
        //selected: 1
    },  
    xAxis: {
        gridLineWidth: 1,
        labels: {
            rotation: -45,
            align: 'right',
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: [
    {
        height: 150,
        lineWidth: 2,
        offset: 0,
        title: {
            text: 'Price',
        }
    },
    {
        top: 225,
        //lineWidth: 0,
        //min: 0,
        //max: 5,
        gridLineWidth: 0,
        offset: 0,
        height: 100,
        title: {
            text: 'Volume',
        }
    },
    ],

    series: [
    {
        yAxis: 0,
        name: 'Price by time',
        stack: 0,

        //data: [1, 12, 32, 43],       
        data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
        tooltip: {
            valueDecimals: 2
        },           
    },
    {
        name: 'Volume by time',
        yAxis: 1,
        stack: 0,
        data: [[1147651200000,67.79],[1147737600000,64.98],[1147824000000,65.26],[1147910400000,63.18],[1147996800000,64.51],[1148256000000,63.38],[1148342400000,63.15],[1148428800000,63.34],[1148515200000,64.33],[1148601600000,63.55],[1148947200000,61.22],[1149033600000,59.77],[1149120000000,62.17],[1149206400000,61.66],[1149465600000,60.00],[1149552000000,59.72],[1149638400000,58.56],[1149724800000,60.76],[1149811200000,59.24],[1150070400000,57.00],[1150156800000,58.33],[1150243200000,57.61],[1150329600000,59.38],[1150416000000,57.56],[1150675200000,57.20],[1150761600000,57.47],[1150848000000,57.86],[1150934400000,59.58],[1151020800000,58.83],[1151280000000,58.99],[1151366400000,57.43],[1151452800000,56.02],[1151539200000,58.97],[1151625600000,57.27],[1151884800000,57.95],[1152057600000,57.00],[1152144000000,55.77],[1152230400000,55.40],[1152489600000,55.00],[1152576000000,55.65],[1152662400000,52.96],[1152748800000,52.25],[1152835200000,50.67],[1153094400000,52.37],[1153180800000,52.90],[1153267200000,54.10],[1153353600000,60.50],[1153440000000,60.72],[1153699200000,61.42],[1153785600000,61.93],[1153872000000,63.87],[1153958400000,63.40],[1154044800000,65.59],[1154304000000,67.96],[1154390400000,67.18],[1154476800000,68.16],[1154563200000,69.59],[1154649600000,68.30],[1154908800000,67.21],[1154995200000,64.78],[1155081600000,63.59],[1155168000000,64.07],[1155254400000,63.65],[1155513600000,63.94],[1155600000000,66.45],[1155686400000,67.98],[1155772800000,67.59],[1155859200000,67.91],[1156118400000,66.56],[1156204800000,67.62],[1156291200000,67.31],[1156377600000,67.81],[1156464000000,68.75],[1156723200000,66.98],[1156809600000,66.48],[1156896000000,66.96],[1156982400000,67.85],],
        tooltip: {
            valueDecimals: 2
        },  
        lineWidth: 3,
        marker: {
            enabled: false
        },

        type: 'column',
    },
    ]

};

var chart = new Highcharts.Chart(options);

});

Answer 1

如果您将“type”添加到xAxis定义中，那么x值将被解释为日期和时间而不是十进制值

xAxis: {
    type : "datetime", //add this line
    gridLineWidth: 1,
    labels: {
        rotation: -45,
        align: 'right',
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
},

您可能需要调整开始时间和间隔以使HighChart正确解释您的x值。以高图网站上的这个演示为例。 http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/

Answer 2

原因是您实际上并未创建股票图表。您的代码如下：

var chart = new Highcharts.Chart(options);

如果您希望它成为股票图表，请执行：

var chart = new Highcharts.StockChart(options);

默认情况下，图表是类别图表。 StockChart是基于时间的。

Answer 3

您可以使用日期格式将时间（以毫秒为单位）替换为日期。

http://jsfiddle.net/3bE4X/

 formatter:function(){
                return Highcharts.dateFormat('%d / %m / %Y',this.value);
 }

http://api.highcharts.com/highcharts#Highcharts.dateFormat()

日期而不是具有多个轴的图表中的Highchart标签上的值

3 个答案: