【问题标题】:Highcharts adding integer instead of dateHighcharts 添加整数而不是日期
【发布时间】:2017-11-27 14:57:40
【问题描述】:

我有一个动态更新的 highcharts 图表。我使用系列上的“AddPoint”函数将值添加到系列中。这是我初始化图表的方式。

       var _trendToolChart = null;
        var _trendSeries = null;  



function createTrendTool() {
        _trendToolChart = Highcharts.chart('trendToolContainer', {
            chart: {
                type: 'spline',
                zoomType: 'x',
                panning: true,
                panKey: 'shift'
            },
            title: {
                text: 'Trending Signals'
            },

            yAxis: {
                title: {
                    text: 'Values'
                }

            },
            xAxis: {
                title: {
                    text: 'Time'
                },
                type: 'datetime'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },

            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: true
                    }
                }
            },
            responsive: {
                rules: [{
                    condition: {
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }

        });

        _trendToolChart.showLoading("Loading...");
    }

我保留 _trendToolChart 变量作为以后的全局参考。我会定期查询我们的 API 以获取值。返回值是日期时间的 x 值和小数的 y 值。因为我有一个多线系列,所以我有一个与图表本身的每条线相关联的 WebId。我通过这个 GUID 找到系列,然后在系列中添加一个点。

这是我第二次调用它时的函数内部:

 var xValue = Date.UTC(apiResponse.DateString); // convert str to date
 var yValue = apiResponse.Value;  // decimal value
 var point = [xValue, yValue];

 // add to series & graph
 var chartSeries = $.grep(_trendToolChart.series, function (e) { return e.userOptions.WebId == apiResponse.elemId; })[0];
 chartSeries.addPoint(point);
 _trendToolChart.redraw();

当我将这些值添加到图表中时,highcharts 将 x 值添加为整数计数,not 添加为日期。这是chrome开发者端响应函数内部的检查:

因此,我在 x 值中得到 [0, 22] 而不是一系列 ["11/27/2017",22]。它在我的图表上显示,我的 xaxis 标签有一个“0”或 1 而不是日期。

这是我尝试的,而不是 addPoint([Date,number]);,我已经完成了 addPoint({x:Date, y:number});现在,在 highchart 系列上的点中显示了日期值,但是在我的图表上,我直观地看到,重绘后添加了零点。

我做错了什么?

【问题讨论】:

    标签: javascript charts highcharts


    【解决方案1】:

    好吧,看起来放在 x 值中的对象不是日期,尽管看起来是这样。它实际上是一个字符串。 所以这会返回一个字符串:

    Date("2017-11-27")
    

    因此,highcharts 不知道如何将其解释为日期时间,因为我告诉它在选项中执行日期时间。解决方案是这样的:

    moment("2017-11-27").ToDate()
    

    这返回了一个正确的日期对象,highcharts 能够解释。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-22
      • 1970-01-01
      相关资源
      最近更新 更多