Question

我想知道在系列数据中使用时间戳（格式化日期的简单方法）时，如何在一个简单的高图表条形图上对齐这些条。

使用categorys属性将x轴项和2d整数数组设置为值时，我得到了预期的结果：条形与背景网格对齐：

{
    series: [2,3,1,2,1,1,3,1],
    xAxis: {
        categories: [1540450800000, 1540537200000, 1540623600000, 1540710000000, 1540796400000, 1540882800000, 1540969200000, 1541055600000]
    }
}

全笔https://codepen.io/adamglang/pen/GwRpaW?editors=1010

但是，当我丢失了类别属性，转而使用系列数据的3d数组时，每个内部数组中的x轴为unix epoch时间戳，y轴的值为unix时戳，则得到的图表具有正确的值但网格与条形不对齐：

{
    series: [[1540450800000,2],[1540537200000,3],[1540623600000,1],[1540710000000,2],[1540796400000,1],[1540882800000,1],[1540969200000,3],[1541055600000,1]]
}

全笔：https://codepen.io/adamglang/pen/GwRpaW?editors=1010

我整天都在研究文档，却没有提及这种行为。我真的很想使用3d数组中的第二种方法，以免更改数据模型。有人知道吗？

Answer 1

带有xAxis.type = 'datetime'的图表将在该点的中间绘制每列。对于您而言，该列显示的是1天数据，因此，要获得适当的网格，您必须在一天的中间时间（12:00）添加点数。

代码：

const data = [{
  "type": "column",
  "name": "Foo",
  "data": [2, 3, 1, 2, 1, 1, 3, 1],
  "canDeleteSeries": false,
  "colorByPoint": true,
  "colors": ["rgba(0,116,205,0.40)", "rgba(139,166,0,0.40)"]
}]

Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  time: {
    useUTC: true
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%B',
    },
    gridLineWidth: 1,
    crosshair: true,
  },
  yAxis: {
    gridLineWidth: 1
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointPadding: 0,
      groupPadding: 0,
    }
  },
  series: [{
    data: [
      [1540450800000 + 5 * 3600 * 1000, 2],
      [1540537200000 + 5 * 3600 * 1000, 3],
      [1540623600000 + 5 * 3600 * 1000, 1],
      [1540710000000 + 5 * 3600 * 1000, 2],
      [1540796400000 + 5 * 3600 * 1000, 1],
      [1540882800000 + 5 * 3600 * 1000, 1],
      [1540969200000 + 5 * 3600 * 1000, 3],
      [1541055600000 + 5 * 3600 * 1000, 1]
    ]
  }],
  credits: {
    enabled: false
  },
  borderWidth: 1,
});

演示： https://jsfiddle.net/wchmiel/5tychvd6/1/

第二种方法是尝试使用带有xAxis.type = 'category'的图表。但是，要使用相同的数据结构，必须在发生加载事件时拆分数据并使用类别和系列数据更新图表。

代码：

const data = [
  [1540450800000, 2],
  [1540537200000, 3],
  [1540623600000, 1],
  [1540710000000, 2],
  [1540796400000, 1],
  [1540882800000, 1],
  [1540969200000, 3],
  [1541055600000, 1]
];

Highcharts.chart('container', {
  chart: {
    type: 'line',
    events: {
      load: function() {
        let chart = this,
          seriesData = [],
          categories = [],
          date;

        data.forEach(elem => {
          seriesData.push(elem[1]);
          date = Highcharts.dateFormat('%e. %b', elem[0]);
          categories.push(date);
        });

        chart.update({
          xAxis: {
            categories: categories
          },
          series: {
            data: seriesData
          }
        }, true, false, false);
      }
    }
  },
  xAxis: {
    categories: [],
    title: {
      text: 'xAxis'
    },
    type: 'category',
    dateTimeLabelFormats: {
      month: '%B',
    },
    gridLineWidth: 1,
    crosshair: true,
  },
  yAxis: {
    title: {
      text: 'yAxis'
    },
    gridLineWidth: 1,
  },
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom',
    useHTML: true,
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: false
      },
      pointPadding: 0,
      groupPadding: 0,
    },
    line: {
      marker: {
        enabled: false,
      },
      color: '#F7A35C',
    }
  },
  series: [{
    type: "column",
    name: "Foo",
    data: [],
    canDeleteSeries: false,
    colorByPoint: true,
    colors: ["rgba(0,116,205,0.40)", "rgba(139,166,0,0.40)"]
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 9999
      },
      chartOptions: {
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'bottom'
        }
      }
    }]
  },
  credits: {
    enabled: false
  },
  borderWidth: 1,
});

演示： https://jsfiddle.net/wchmiel/7Lfd0mgc/3/

高图-使用系列时间戳记时将列与网格线对齐

1 个答案: