Высокие диаграммы: метки данных снаружи, когда внутри недостаточно места, с помощью электронных таблиц Google

Question

Я делаю гистограммы, используя Highcharts и таблицы Google. Я хочу разместить метки данных внутри столбцов, но иногда их значение настолько мало, что метка не помещается внутри столбца, поэтому в этих случаях я хочу разместить их вне столбца. Я знаю, что это можно сделать, как показано здесь: 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