Question

有没有办法在每晚的xAxis上填充日期时间？

我设法做了一个晚上，但是想要显示的每个晚上都这样做。作为必须，计算真实的日出和日落并仅在标尺允许看到时才允许显示。一个多星期，没有任何意义。

xAxis: {
        type: 'datetime',
        plotBands: [{ 
        color:'rgba(156,156,156,.15)',
        from: Date.UTC(2017, 10, 13,19),
        to: Date.UTC(2017, 10, 14,5),
            label: {                            
            text: '☾',
            style : {color : '#D9B11D',
            fill : '#D9B11D',
            fontSize :'20px' },
            align: 'left',
            x: 10,y: 30
        }
    }]

谢谢，

Answer 1

你可以像这样处理情节乐队的数据：

  chart: {
    events: {
      load: function() {
        var xAxis = this.xAxis[0], 
            ex = xAxis.getExtremes(),
          start = ex.min,
          plotBands = [];


          while (start + nightLength < ex.max) {

            plotBands.push({
              from: start,
              to: start + nightLength,
              color: 'rgba(156,156,156,.15)',
              label: {
                text: '☾',
                style: {
                  color: '#D9B11D',
                  fill: '#D9B11D',
                  fontSize: '20px'
                },
                align: 'left',
                y: 30
              }
            });
            start += day;

          }
          xAxis.update({
            plotBands: plotBands
          });
      }
    }
  }

现场演示： http://jsfiddle.net/kkulig/cpk59waw/

代码的一个重要部分是图表极值约束（因此只需要根据需要设置多个绘图带）：

 while (start + nightLength < ex.max)

我在这里实施了非常简化的案例。假设夜晚长度恒定，日出总是在同一时间发生。

如果你想拥有日出和日落的真实值，你应该找到一些数据源。

在Highcharts中为所有夜晚填写xAxis

1 个答案: