如何在自定义highcharts按钮中垂直居中文本

时间:2014-01-05 16:48:12

标签: javascript html css svg highcharts

我正在使用Highcharts.js和导出模块在我的图表顶部添加自定义文本按钮。我在整个自定义按钮内的文本中心存在问题。看起来如何:

enter image description here

相反,“嵌入图表”文本需要看起来像相邻的日期选择器。

我的代码:

exporting: {
    buttons: {
        contextButton: {
            enabled: false
        },
        customButton: {
            x: -1,
            y: 30,
            _titleKey: "embed",
            onclick: createChart,
            text: "embed chart",
            theme: {
                'stroke-width': 1,
                height: 8,
                align: 'center',
                stroke: 'silver',
                r: 0
            }
        }
    }
}

jsFiddle:http://jsfiddle.net/F8MjD/

有关如何更改的任何建议?

2 个答案:

答案 0 :(得分:0)

根据在线演示更新:

生成的代码:

    <text x="5" y="18" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:black;fill:black;" zIndex="1">
        <tspan x="5">embed chart</tspan>
    </text>

y =“18”应为 y =“13”

总概述

<g class="highcharts-button" top="-10px" useHtml="true" style="cursor:default;" stroke-linecap="round" transform="translate(710,40)">
    <title/>
    <rect rx="0" ry="0" fill="white" x="0.5" y="0.5" width="83" height="18" stroke="silver" stroke-width="1"/>
    <text x="5" y="13" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:black;fill:black;" zIndex="1">
        <tspan x="5">embed chart</tspan>
    </text>
</g>

现在问题是你需要使用哪个设置来使用highcharts来改变它。

答案 1 :(得分:0)

您可以将填充设置为2值。