Highcharts отзывчивые легенды относительно области графика - PullRequest
0 голосов
/ 18 марта 2020

Я хотел бы скрыть легенду, если она занимает слишком много места по вертикали относительно общей высоты графика. Highcharts предлагает обратный вызов, чтобы указать условие, если должно быть применено правило чувствительности, но лучшее, что я могу сделать, это оценить высоту легенды, которая не оптимальна:

// Hide legend if it's height takes more than 40% of the total height
const verticalThreshold = 0.4
// This is an empirical constant which tries to estimate the average width (in px) of one legend item
const estimatedItemWidth = 260

const shouldHideLegend = (chart) => {
    const availableWidth = chart.renderTo.clientWidth - chart.legend.padding * 2
    const availableHeight = chart.renderTo.clientHeight
    const legendItemCount = chart.legend.allItems.length
    const estimatedColumnCount = Math.max(1, Math.floor(availableWidth / estimatedItemWidth))
    const estimatedRowCount = Math.ceil(legendItemCount / estimatedColumnCount)
    const estimatedHeight = estimatedRowCount * (chart.legend.itemHeight + chart.legend.itemMarginTop + chart.legend.itemMarginBottom)
    return estimatedHeight / availableHeight > verticalThreshold
}

const config = {
    // ...
    responsive: {
        rules: [
            {
                condition: {
                    callback: function() { shouldHideLegend(this) }
                },
                chartOptions: {
                    legend: {
                        enabled: false
                    }
                }
            }
        ]
    }
}

Есть ли лучший способ чтобы достичь этого?

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