Question

我使用highchart js来显示我的数据，category是一个时间戳数组（以毫秒为单位），它运行良好，但是我需要让它实时，每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);

        }
    }
},

请帮助检查我如何在图表中添加新点，而且我认为我们应该使用类型为xAxis的日期时间，但我不知道如何使用，如果可以请给我解决方案。

Answer 1

我已经通过jsfiddle的代码，你似乎已经在一个JS中编写了完整的代码。我还在我们的应用程序中使用了高级图表，并在提供吞吐量值（每2秒上传/下载）方面投入了大量精力。我们所做的是使用对象文字方法。我们将代码放在一个js中，并且js包含很少的函数，例如init（用于初始化值并使用new来动态创建图表的对象）。

  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的obejct（例如init函数）并使用myplot对象调用后续函数。我希望这会对你有所帮助。

Regds

Answer 2

问题在于您将分类的xAxis与日期时间xAxis混合。

在xAxis上显示某些..类别时，类别非常有用。像水果，汽车，浏览器共享等。

在您的情况下，您应该从头开始使用日期时间。你应该改变：

从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/

无法将点添加到高亮区域

2 个答案: