无法将标签附加到高图饼图

Question

我正在尝试将自定义标签添加到highcharts饼图中。标签将（最终）为中心，底部对齐并显示一些html数据。问题是标签没有显示在图表上，试图使用'渲染器'。我对highcharts很新，我做错了什么？

<svg width="20%" height="20%" viewBox="0 0 200 200">
  <g transform="translate(0.000000,200.000000) scale(0.100000,-0.100000)" fill="red" stroke="none">
    <path d="M510 1235 c-108 -24 -219 -86 -303 -168 -64 -62 -147 -169 -147 -188
0 -4 33 -36 73 -72 l73 -65 63 80 c116 145 228 206 360 195 93 -8 155 -32 340
-132 186 -101 297 -143 402 -151 208 -17 407 106 547 337 l22 36 -74 66 -73
67 -41 -58 c-156 -221 -322 -270 -547 -162 -44 22 -134 69 -200 105 -201 109
-351 143 -495 110z" />
  </g>
</svg>

Answer 1

您处于正确的轨道上，因为您的渲染文字在那里并出现在图表上。您需要定义的是您希望放置文本的预期X和Y值。

我发现这是因为＆＃34; y＆＃34; in＆＃34;样式＆＃34;：

如果您在renderer.text来电中定义了不同的y值，例如100，则可以获得此值：

以下是您应遵循的语法：

chart.renderer.text('Your text', X_VALUE, Y_VALUE)

在上面的示例中，我将您的文字设置为：

chart.renderer.text('Your text', 0, 100)

...从图表顶部向下放100个像素。

您必须手动定义这些值;没有开箱即用的方式说＆＃34;底部对齐，居中对齐。＆＃34;为了使其更加通用，您可以做的是捕获容器div的高度和宽度，并以这种方式计算x和y值。

您可以通过在样式表声明中修改图表的高度和宽度，在图表选项之外定义JavaScript变量，然后从renderer.text声明中调用这些变量来实现此目的：

// in your inline stylesheet
#container: { width: '650px', height: '450px' }

// variables defined before your chart options
var chartHeight = $('#container').height();
var chartWidth = $('#container').width();

// in your renderer code
 chart.renderer.text('Your text', chartWidth * 0.5, chartHeight - 100)

在上面的示例中，渲染的文字将从图表宽度的50％和图表底部的100个像素开始。

要记住一点：您提到了一个HTML表格。在这种情况下，我建议将renderer.text切换为renderer.html。这将允许在最终图表中呈现更多HTML元素。

我希望所有这些都有所帮助！