【问题标题】:Highcharts x axis formatting optionsHighcharts x 轴格式选项
【发布时间】:2017-03-09 11:58:24
【问题描述】:

我是 highcharts 的初学者。我正在尝试一些事情并被卡住了。我的 x 轴有多次重复的值。如图所示,工具提示值应包含日期和时间。但我想改变的是 x 轴值。相同的值必须只显示一次,不能在有数据的地方重复。

X 轴格式必须是 DD-MMM 并且工具提示应该是 DD-MM-YY HH am/pm 。 这可能吗?

这是我的试用代码

http://jsfiddle.net/j6oqcgp2/

Highcharts.chart('container', {
chart: {
    type: 'spline'
},
title: {
    text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
    text: 'Irregular time data in Highcharts JS'
},
xAxis: {

    categories:['01-Feb-17 12 AM','01-Feb-17 01 AM','01-Feb-17 02 AM','02-Feb-17 04 AM','02-Feb-17 05 AM','02-Feb-17 06 AM','02-Feb-17 07 AM'],
    labels: {                
                    formatter: function () {
                             y=(this.value).substring(1,6);

                        return  y;
                    }


}
},
yAxis: {
    title: {
        text: 'Snow depth (m)'
    },
    min: 0
},
tooltip: {

    formatter: function () {

            y=(this.x).substring(0,15);
            return y;
        },
        shared:false


},

plotOptions: {
    spline: {
        marker: {
            enabled: true
        }
    }
},

series: [{
    name: 'Winter 2012-2013',
    // Define the data points. All series have a dummy year
    // of 1970/71 in order to be compared on the same x axis. Note
    // that in JavaScript, months start at 0 for January, 1 for February etc.
    data: [5,10,19,10,4,6,8]


}]

});

and this is how i want it to be

【问题讨论】:

  • 对于初学者,由于您正在绘制时间序列数据,我将使用 datetime 轴类型。这将使日期信息的处理更加直观,并且不再需要获取类别值的子字符串。然后,仍然是控制tickInterval 的问题,如下迈克的回答所述。

标签: json highcharts


【解决方案1】:

如果您的 x 轴类别将是一组可预测的值(例如,每天有四个读数),那么您只需添加 tickInterval 属性即可在日期变化时显示新的轴标签(见http://api.highcharts.com/highcharts/xAxis.tickInterval)。

因此,如果您每天有四个读数,您可以将 tickInterval: 4 添加到您的 x 轴选项中。这将在每四次读数时显示一个轴标签,或者在本例中为每天一次。

但是,如果您的 x 轴类别不可预测(例如,每天有任意数量的读数),您可能需要查看这个 Highcharts 演示,它显示了一个不规则时间段的图表:http://www.highcharts.com/demo/spline-irregular-time。在此演示中,您将看到您测量的任何单位(小时、天等)的常规、非重复轴标签,并且绘制的数据与数据中记录的频率一样频繁。

希望这些示例和资源对您有所帮助。

【讨论】:

  • 我实际上是从 json 数组中检索 highcharts 的数据,它给出了每小时的数据,一天的数据可以是 N 个数字。在 X 轴上,我应该得到一天的 Plotinterval,如果有数据,则必须每小时绘制一次数据。请参阅上面附加的屏幕截图。这就是我希望数据显示的方式。这些是我试图在 highcharts 上表示的实际值。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多