Как центрировать текст по вертикали в пользовательской кнопке highcharts

Я использую Highcharts.js и модуль экспорта, чтобы добавить пользовательскую текстовую кнопку поверх диаграммы. У меня проблемы с центрированием текста внутри пользовательской кнопки по вертикали. Как это выглядит:

введите здесь описание изображения

Вместо этого текст «встроить диаграмму» должен выглядеть как соседний инструмент выбора даты.

Мой код:

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/

Любые предложения о том, как изменить его?


javascript svg html css highcharts
person Mark    schedule 05.01.2014    source источник
comment
Установите высоту строки встроенной диаграммы на высоту элемента ввода.   -  person Danield    schedule 05.01.2014
comment
Я добавил 'line-height': 8, внутри темы, и это не имеет никакого эффекта.   -  person Mark    schedule 05.01.2014
comment
Любая живая демонстрация, например jsFiddle?   -  person Sebastian Bochan    schedule 06.01.2014
comment
Вот: jsfiddle.net/F8MjD   -  person Mark    schedule 06.01.2014
comment
Вы можете установить отступ равным 2, как здесь jsfiddle.net/F8MjD/1.   -  person Sebastian Bochan    schedule 06.01.2014
comment
Спасибо - это решило это!   -  person Mark    schedule 06.01.2014
comment
Отлично, я добавил это как ответ, вы можете отметить, что это правильно.   -  person Sebastian Bochan    schedule 06.01.2014

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете установить отступ как значение 2.

person Sebastian Bochan    schedule 06.01.2014

arrow_upward
0
arrow_downward

Обновлено на основе онлайн-демонстрации:

Сгенерированный код:

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

Теперь вопрос в том, какую настройку вам нужно использовать с хайчартами, чтобы изменить это.

person Anima-t3d    schedule 05.01.2014
comment
Это не сработает, это не кнопка и рисуется через SVG. - person Mark; 06.01.2014