无法向高图区域添加点

Unable to add point into highchart area

本文关键字：添加 区域 高图      更新时间：2023-09-26

我使用highchart js来可视化我的数据，类别是一个时间戳数组(以毫秒为单位)，它工作得很好，但是我需要使其实时，每20秒更新一次。

我试图使用highchart提供的addPoint函数向当前图表添加新的点，我得到了一个错误www.highcharts.com/errors/19，它说

刻度太多

当您尝试在轴上应用太多刻度时，会发生此错误，特别是当你添加的刻度超过轴像素长度时。在练习一下，把虱子加得太密集是没有意义的不能彼此区分。错误的一个原因可能是您设置的tickInterval对于数据值来说太小了的范围内。一般来说，tickPixelInterval是一个更好的选择自动处理。另一种情况是类别在日期时间轴上，这将导致Highcharts尝试自1970年以来，每毫秒加一个刻度。

这是我的小提琴http://jsfiddle.net/ndkhoiits/5jh93/

chart: {
    type: 'area',
    events: {
        click: function () {
            var series1 = this.series[0];
            var series2 = this.series[1];
            // Add more 20 seconds
            var x = series1.points[series1.points.length - 1].category + 20 * 1000;
            //error here
            series1.addPoint([x, 1000], true, true);
        }
    }
},

请帮忙检查我如何在图表中添加新的点，另外我认为我们应该使用type is datetime作为xAxis，但我不知道如何使用，如果你可以，请给我解决方案

问题是您将分类xAxis与日期时间xAxis混合在一起。

类别在显示一些…时很有用。类别在x轴上。比如水果、汽车、浏览器共享等

在你的例子中，你应该使用datetime from beginning。你应该修改:

  • 从xAxis中删除类别

  • 连接categories与site1、site2，例如:

    for(var i = 0; i < site1.length; i++){
   site1[i] = [ categories[i], site1[i] ];
   site2[i] = [ categories[i], site2[i] ];
}

现场演示:http://jsfiddle.net/5jh93/1/

我已经从jsfiddle通过你的代码，似乎你已经在一个JS中编写了整个代码。我还在我们的应用程序中使用了highcharts，并在提供吞吐量值(每2秒上传/下载一次)方面付出了很多努力。我们使用的是对象字面方法。我们已经把我们的代码放在一个js和js包含几个函数，如init(初始化值和创建对象的图表使用新动态i.e.)。

  var myplot = {
    init : function() {    }
    });
    chart = new Highcharts.Chart({
    //here u can write the code that u need to draw with series object
    }
drawmyplot : function(val1,val2){
var x = series1.points[series1.points.length - 1].category + 20 * 1000;
series1.addPoint([x, val1], false, true); 
series2.addPoint([x, val2], false, true);
$(".firstValue").text(val1 * 1000,1);
$(".secondValue").text(val2 * 1000,1);   
}

然后你可以从另一个js中初始化myplot的对象(例如init函数)并使用myplot对象调用后续函数。我希望这对你有帮助。

登记

相关文章：