Highcharts：使用Google电子表格时，如果内部没有足够的空间，则在外部使用数据标签

Question

我正在使用Highcharts和Google电子表格制作条形图。我想将datalabels放置在条形图内，但有时值太小，以致标签不能很好地放入条形图内，因此在这些情况下，我想将它们放置在条形图外。我知道可以做到这一点，如下所示：https://jsfiddle.net/o3cujptj/

但是当我尝试在我的图表中使用此方法时，该方法使用Google表格获取其数据，因此它不起作用，因为chart.series [0] .data返回空。我该如何进行这项工作？

我的js小提琴：https://jsfiddle.net/jmunger/sLk8nmo6/2/

        const chart = Highcharts.chart('container', {
        plotOptions: {
                bar: {
                    dataLabels: {
                        x: -5,
                        align: 'right',
                        style: {
                            textOutline: 0
                        },
                        shadow: false,
                        borderWidth: 0,
                        inside: true,
                        enabled: true,
                        pointFormatter: function() {
                            return Highcharts.numberFormat(this.point.y, 0);
                        },
                        //format: 'n = {point.label}'
                    }
                }
            },
         chart: {
         events: {
          load: function() {
                    const chart = this,
              points = chart.series[0].data,
              options = {
                dataLabels: {
                  inside: false,
                  style: {
                    color: 'black'
                  }
                }
              };

            points.forEach(function(point) {
              if (point.shapeArgs.height < 30) {
                point.update(options, false);
              }
            });

            chart.redraw();
          }
        }
      },
          data: {
                googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
                googleSpreadsheetWorksheet: 3,
                endColumn: 3,
                seriesMapping: [{
                    color: 2,
                    label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
                }],
            complete: function (options) {
              //?? anything to do here?
            }
            },
      series: [{
        dataLabels: {
          inside: true,
          enabled: true,
          style: {
            color: 'white'
          }
        },

        type: 'bar'
      }]
    });

    Option 2: Or upload your JavaScript file

    Indentation level:

    Brace style:

    BEAUTIFY JAVASCRIPT  BEAUTIFY JAVASCRIPT IN NEW WINDOW
    Beautified JavaScript:
    const chart = Highcharts.chart('container', {
        plotOptions: {
            bar: {
                dataLabels: {
                    x: -5,
                    align: 'right',
                    style: {
                        textOutline: 0
                    },
                    shadow: false,
                    borderWidth: 0,
                    inside: true,
                    enabled: true,
                    pointFormatter: function () {
                        return Highcharts.numberFormat(this.point.y, 0);
                    },
                    //format: 'n = {point.label}'
                }
            }
        },
        chart: {
            events: {
                load: function () {
                    const chart = this,
                        points = chart.series[0].data,
                        options = {
                            dataLabels: {
                                inside: false,
                                style: {
                                    color: 'black'
                                }
                            }
                        };

                    points.forEach(function (point) {
                        if (point.shapeArgs.height < 30) {
                            point.update(options, false);
                        }
                    });

                    chart.redraw();
                }
            }
        },
        data: {
            googleSpreadsheetKey: '1D0v11GK07TJu6fXcwbcofiPOo4FmRpATGBAaSBqNlZE',
            googleSpreadsheetWorksheet: 3,
            endColumn: 3,
            seriesMapping: [{
                color: 2,
                label: 3 // Labels are pulled from column 2 and picked up in the dataLabels.format below
            }],
            complete: function (options) {
                //?? anything to do here?
            }
        },
        series: [{
            dataLabels: {
                inside: true,
                enabled: true,
                style: {
                    color: 'white'
                }
            },

            type: 'bar'
        }]
    });

Answer 1

图表加载完成时触发load事件-而非数据。

您可以使用redraw或render事件，这些事件在加载数据后调用。

let allowChartUpdate = true;
const chart = Highcharts.chart('container', {
  chart: {
    events: {
      render: function() {
        const chart = this,
          points = chart.series[0].points,
          options = {...};

        if (points.length && allowChartUpdate) {
          allowChartUpdate = false;
          points.forEach(function(point) {
            if (point.shapeArgs.height < 30) {
              point.update(options, false);
            }
          });

          chart.redraw();
        }
      }
    }
  },
  ...
});

---

实时演示： https://jsfiddle.net/BlackLabel/tn98gwmj/

API参考： https://api.highcharts.com/highcharts/chart.events.render