Highcharts - 定位图例（左和右/ x和y）-Java 学习之路

My Highcharts解决方案为用户提供了控制在任何一个点显示哪个系列的选项 . 由于可用系列的数量，我将功能扩展到复选框，而不是仅仅在启动时添加它们并最初隐藏多数，因为这会使图例变得巨大 .

我想在图表上叠加一个按钮，使其看起来是整合的 . 这本身没有问题，因为我可以给 legend.x 一个负值来移动它以腾出按钮空间 . 但是，当以编程方式添加更多系列时，这会产生问题，因为图例保持其原始宽度，当有太多时，我会丢失一些选项 .

这是我的问题的一个简单的小提琴：https://jsfiddle.net/paLoxcy3/ . 这是一个相关的片段：

legend: {
   align: "right",
   x: -100
}

值得添加的是图形需要保持响应宽度，因此我不能只添加 width . 顺便说一句，我是这样做的（事实上，当系列名称最终在我当前的小提琴中掉线）时，它们会变得左对齐，这是不可取的 .

我已经很好地利用了 legend 的选项但是在这一点上假设唯一的解决方案是有效地将 padding-right 添加到图例持有者是使用 chart.events.load 和 chart.events.redraw 以某种方式手动执行它？这有点令人讨厌，因为添加 marginTop 和 marginBottom 的选项存在但不是 marginLeft 和 marginRight .

任何帮助非常感谢！文档的快捷方式是here以节省一些时间:)

1 回答

我认为这个问题与Highcharts legend.renderItem函数中的小问题有关 . 作为一种解决方法，您可以更改if语句负责将项目移动到另一行 . 在这里，您可以看到此语句在代码中的外观：

// if the item exceeds the width, start a new line
        if (horizontal && legend.itemX - initialItemX + itemWidth >
                (widthOption || (chart.chartWidth - 2 * padding - initialItemX - options.x))) {
            legend.itemX = initialItemX;
            legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom;
            legend.lastLineHeight = 0; // reset for next line (#915, #3976)
        }

在这里你可以看到我如何改变这个陈述：

// if the item exceeds the width, start a new line
        if (horizontal && legend.itemX - initialItemX + itemWidth >
                (widthOption || (chart.chartWidth - 2 * padding - initialItemX - ((options.align === 'right') ? (-options.x) : options.x)))) {
            legend.itemX = initialItemX;
            legend.itemY += itemMarginTop + legend.lastLineHeight + itemMarginBottom;
            legend.lastLineHeight = 0; // reset for next line (#915, #3976)
        }

在这里您可以找到与此问题相关的Github主题：https://github.com/highcharts/highcharts/issues/5443

在这里你可以看到我的解决方法图表：https://jsfiddle.net/paLoxcy3/2/

最好的祝福 .

回复于 2024-05-10T06:56:13+08:00

Highcharts - 定位图例（左和右/ x和y）

1 回答

相关问题