Есть ли способ ограничить легенды на горизонтальном макете для определенного количества строк во время экспорта? - PullRequest
0 голосов
/ 06 ноября 2019

Я использую последнюю версию Highcharts, пытаюсь экспортировать диаграмму в png и пытаюсь увидеть, есть ли способ ограничить число строк, отображаемых в экспортированном png, используя горизонтальный макет до 2 строк, если легендыразбивка на более чем 2 строки.

Вот рабочий пример экспорта: https://jsfiddle.net/siluok3/085gzjtn/7/

Highcharts.chart('container', {
  chart: {
    style: {
      fontFamily: '"Arial", sans-serif',
      color: '#7b797a',
      'z-index': 'inherit'
    },
    resetZoomButton: {
      theme: {
        fill: '#5cb85c',
        stroke: '#4cae4c',
        style: {
          color: '#fff',
          fontSize: '15px'
        },
        r: 3,
        states: {
          hover: {
            fill: '#449d44',
            stroke: '#398439'
          }
        }
      }
    }
  },
  title: {
    text: 'Data labels only visible on export'
  },
  credits: {
    enabled: false,
    style: {
      display: "none"
    }
  },

  legend: {
    useHTML: true,
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    y: 32,
    itemStyle: {
      color: '#7b797a',
      fontWeight: "normal"
    },
    itemHoverStyle: {
      color: '#7b797a'
    }
  },

  navigation: {
    buttonOptions: {
      theme: {
        'stroke-width': 0,
        r: 0,
        fill: null,
        states: {
          hover: {
            fill: null
          },
          select: {
            stroke: null,
            fill: null
          }
        }
      }
    },
    menuItemHoverStyle: {
      background: '#008add'
    }
  },

  xAxis: {
    labels: {
      rotation: 270
    },
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mayfsdfdsfdsf', 'Junfdfsd', 'Julfsdfsdfds', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: [{
    data: [6, 4, 2],
    name: 'Firfdsfdsst'
  }, {
    data: [7, 3, 2],
    name: 'Secfsdfdsdfond'
  }, {
    data: [9, 4, 8],
    name: 'Third'
  }, {
    data: [1, 2, 6],
    name: 'Fourth'
  }, {
    data: [4, 6, 4],
    name: 'Fifdsfdsfdsfdsfsdfth'
  }, {
    data: [1, 2, 7],
    name: 'Sixth'
  }, {
    data: [4, 2, 5],
    name: 'Sevefdsfdsfdsfsdnth'
  }, {
    data: [8, 3, 2],
    name: 'Efdsfdsfdsfdsighth'
  }, {
    data: [4, 5, 6],
    name: 'Nifdsfdsfdsfdsfdsfnth'
  }, {
    data: [4, 2, 5],
    name: 'Sevefdsfdsfdsfsdnth'
  }, {
    data: [8, 3, 2],
    name: 'Efdsfdsfdsfdsighth'
  }, {
    data: [4, 5, 6],
    name: 'Nifdsfdsfdsfdsfdsfnth'
  }],

  exporting: {
    chartOptions: {
      legend: {
        title: {
          text: '',
        },
        itemHiddenStyle: {
          display: 'none',
        },
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'bottom',
        itemDistance: 10,
        y: 0,
        itemMarginTop: 5,
        itemStyle: {
          fontSize: '10px',
        },
        symbolPadding: 2,
        alignColumns: false,
      },
      rangeSelector: {
        enabled: false
      },
      navigator: {
        enabled: false
      },
      scrollbar: {
        enabled: false
      },
    }
  }

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

Как видно, легенды разбиваются на 3-й ряд, если они больше или больше. Есть ли интуитивный способ найти обходной путь?

1 Ответ

0 голосов
/ 07 ноября 2019

Вы можете использовать свойство itemWidth для ограничения ширины элемента и, как следствие, количества строк. К сожалению, пока нет встроенного решения для динамической регулировки количества строк в легенде.

exporting: {
    chartOptions: {
        legend: {
            itemWidth: 90,
            ...
        },
        ...
    }
}

Демонстрационная версия: https://jsfiddle.net/BlackLabel/gtjewc1v/

Справочник по API: https://api.highcharts.com/highcharts/legend.itemWidth

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...