Question

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

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

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

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

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

我已经很好地利用legend的选项，但此时假设有效添加padding-right到图例持有者的唯一解决方案是使用chart.events.load和{ {1}}以某种方式手动完成？添加chart.events.redraw和marginTop的选项有点烦人存在marginBottom但不存在marginLeft和marginRight。

任何帮助非常感谢！文档的快捷方式是here以节省时间：）

Answer 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/

最好的问候。

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

1 个答案: