使用highcharts，是否可以在列下添加dataLabels？

Question

我想在每列之下放置几年。有没有办法做到这一点？

这是我的代码：

var months = [],
        datas = [],
        estimeSapColor = "#009dc1", // Bleu - Estimation Fournisseur
        reelGrdfColor = "#d8662c", // Orange - Relève Distributeur
        colors = [],
        arr1 = [],
        arr2 = [],
        left = null,
        right = null
    ;

    for (var i = 0; i < data.G.length; i++) {
        if (!data.G.hasOwnProperty(i)) {
            continue;
        }
        left = parseInt(data.G[i].consoSimple, 10);
        right = null;
        for (var j = 0; j < data.G.length; j++) {
            if (!data.G.hasOwnProperty(j)) {
                continue;
            }
            if (data.G[i].numMonth == data.G[j].numMonth && parseInt(data.G[i].year) == parseInt(data.G[j].year) - 1) {
                right = parseInt(data.G[j].consoSimple, 10);
                break;
            }
        }
        arr1.push(left);
        arr2.push(right);

    }

    $.each(data.G, function(index, val) {

        months.push(data.G[index].month);

        datas.push(parseInt(data.G[index].consoSimple));

        if (data.G[index].typeReleve == "estimeSap") {
            colors.push(estimeSapColor);
        } else {
            colors.push(reelGrdfColor);
        }
    });

之后，是否有可能在工具提示中有这些年份？

提前多多感谢。

Answer 1

不是配置对象，但您可以使用Renderer以编程方式添加它们。要格式化工具提示，您需要使用tooltip.pointFormat/formatter/etc。

渲染标签的功能：

function renderBottomLabels() {
  this.series.forEach(series => {
    series.data.forEach(point => {
      let bottomLabel = point.bottomLabel;
      const shapeArgs = point.shapeArgs,
        series = point.series,
        {
          translateX: tx,
          translateY: ty
        } = series.getPlotBox();

      if (!bottomLabel) {
        point.bottomLabel = bottomLabel = this.renderer.text(point.series.options.year, -9999, 0)
          .css({
            fontSize: '11px',
            fontWeight: 'bold'
          })
          .attr({
            zIndex: 10,
            align: 'center'
          })
          .add();
      }
      bottomLabel.attr({
        x: shapeArgs.x + shapeArgs.width / 2 + tx,
        y: shapeArgs.y + shapeArgs.height + ty + bottomLabel.getBBox().height,
      });
    });
  });
}

在加载/重绘

上附加渲染标签

  chart: {
    type: 'column',
    events: {
      load: renderBottomLabels,
      redraw: renderBottomLabels
    }
  },

实例和输出

http://jsfiddle.net/h47qgb6r/