Nano Hash - криптовалюты, майнинг, программирование

Highcharts применяет собственный стиль к контекстной кнопке с использованием класса css

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

Хотя я нашел несколько примеров того, как добиться этого в рамках сценария уровня диаграммы Highcharts (например, ЭТОТ ПРИМЕР ) кажется довольно повторяющимся внедрение этих стилей в каждую диаграмму, зная, что у меня есть большой набор, который нужно затронуть.

Я понимаю, что это потенциально может быть достигнуто с помощью глобальной темы в Highcharts, однако я все еще ограничен параметрами конфигурации самой библиотеки.

Например, это будет предложенный путь:

var chartingOptions = {
exporting: {
    buttons: {
        'myButton': {
            id: 'myButton',
            symbol: 'circle',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF'
        }
    }
}

Но, к сожалению, это не дает большой выразительности.

Могу ли я определить стиль CSS и каким-то образом передать его в глобальную тему или набор диаграмм, используя его ID или CLASS?

javascript html jquery css highcharts
03.03.2015

  • В вашем файле CSS просто добавьте #myButton{ your css tweaks } 03.03.2015
  • Если вам нужно больше контроля над кнопками, то как насчет создания собственных кнопок? И расположить их над диаграммой Highcharts. Затем вы можете привязать события кликов к отдельным методам chart.exportChart(). См. API. 04.03.2015
  • Спасибо. Изменение файла css с помощью идентификатора (например, #myButton) в этом случае не работает. @PawełFus - ценю это. Я, скорее всего, пойду его путем, если не будет альтернативных предложений; предпочел бы использовать встроенное позиционирование библиотеки, если это возможно, и просто стилизовать элементы по мере необходимости. 04.03.2015
  • Что именно вы хотели бы изменить? Откройте dev-tools и проверьте элемент. Вы увидите, что кнопки Highcharts представляют собой группы с тегами title/rect/path/text. Вы можете получить в CSS существующую кнопку, например $(".highcharts-button:eq(7)") -›, но число 7 будет зависеть от количества уже созданных кнопок (в вашей демонстрации: 1m, 3m, 6m, YTD, 1y, All, exporting button = 7 элементов, мы считаем от 0 ). Но все же настройка параметров CSS будет не такой простой, как вы думаете. И я просто упоминаю SVG, а не VML :) 05.03.2015
  • Я могу работать с этим, чтобы начать и просто придерживаться доступных атрибутов. Я только проверял, есть ли простой способ пройти класс стиля, который, возможно, я упустил из виду, но, похоже, в настоящее время его нет. Спасибо, я ценю это предложение. 09.03.2015

Ответы:


1

Да, вы можете установить class или id кнопки, используя свойство theme.

buttons: {
    'myButton': {
        symbol: 'circle',
        symbolFill: '#B5C9DF',
        hoverSymbolFill: '#779ABF',
        theme: {
            class: "myButton highcharts-button highcharts-button-normal",
            id: "myDiamondButton"
        }
    }
}
05.09.2017
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..