Highcharts中的X轴间隔

Posted 2023-03-14

【中文标题】Highcharts中的X轴间隔

【英文标题】：X-axis interval in Highcharts

【发布时间】：2015-10-30 10:33:43

【问题描述】：

我的网站上显示了这张图表。如何设置 x 轴的间隔？例如我希望显示第一个值，然后跳过第二个并显示第三个。 这可以做到吗？还是您总是只需要在数组中显示您传递给轴的所有数据？

我的代码：（timestamp 是一个包含我的时间的 JS 数组。我可以以 epoch 格式获取那个时间。act 和 temps 是沿 y 轴绘制数据的数组）

$(function () 
    $('#tempactgraph').highcharts(
        chart: 
            zoomType: 'xy'
        ,
        title: 
            text: 'Temperature & Activity Monitoring '
        ,
        subtitle: 
            text: 'Source: Cowlar Sensors'
        ,
        xAxis: [
            categories: timestamp,
            crosshair: true
        ],
        yAxis: [ // Primary yAxis
            labels: 
                format: 'value°C',
                style: 
                    color: Highcharts.getOptions().colors[1]
                
            ,
            title: 
                text: 'Temperature',
                style: 
                    color: Highcharts.getOptions().colors[1]
                
            
        ,  // Secondary yAxis
            title: 
                text: 'Activity',
                style: 
                    color: Highcharts.getOptions().colors[0]
                
            ,
            labels: 
                format: 'value xx',
                style: 
                    color: Highcharts.getOptions().colors[0]
                
            ,
            opposite: true
        ],
        tooltip: 
            shared: true
        ,
        legend: 
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        ,
        series: [
            name: 'Activities',
            type: 'spline',
        connectNulls: 1,
            yAxis: 1,
            data: act,
            tooltip: 
                valueSuffix: ' xx'
            

        , 
            name: 'Temperature',
            type: 'spline',
        connectNulls: 1,
            data: temps,
            tooltip: 
                valueSuffix: '°C'
            
        ]
    );
);

【问题讨论】：

您使用类别还是日期时间？您能否在 jsfiddle.net 上将您的示例重新创建为现场演示？

这是 jsfiddle 的链接-> jsfiddle.net/6xLaxL0e/4 在 x 轴上，我使用的是类别。我正在将一个数组传递给所有三个轴！

将 tickInterval 设置为 2，如下所示：jsfiddle.net/6xLaxL0e/5 但最好使用日期时间 xAxis 而不是类别。

我该怎么做？我已经编辑了我的问题并发布了我的实际代码！

tickInterval: api.highcharts.com/highcharts#xAxis.tickInterval

【参考方案1】：

您需要像这样将tickInterval:2 添加到您的 x 轴减速中

xAxis: [
            categories: timestamp,
            crosshair: true,
            tickInterval: 2
        ],

Highcharts API Reference

【讨论】：

做到了。谢谢！ :)