В Highcharts Как сохранить прямоугольник таких SVG-элементов, прикрепленных с данными серии, но не с пикселем при изменении размера, перекомпоновки, перерисовки, уменьшения масштаба? - PullRequest
Новая
       35

В Highcharts Как сохранить прямоугольник таких SVG-элементов, прикрепленных с данными серии, но не с пикселем при изменении размера, перекомпоновки, перерисовки, уменьшения масштаба?

0 голосов
/ 06 июля 2018

Вы можете видеть, что после того, как я изменил размер браузера, рисование данных серии могло бы быть соответствующим образом автоматически изменено в размерах, но прямоугольный элемент SVG просто сохраняет связь с положением пикселей в окнах,

Это просто смешно, так что теперь я должен снова и снова переназначать значения пикселей этого svg функцией toPixels в некотором перерисовке изменения размера, обработчике изменения масштаба и бла-бла-бла (не ясно, сколько сценариев будет обработано),

Есть ли какая-либо настройка, позволяющая прямоугольнику таких SVG-элементов связываться с данными серии и индексом оси X, но не с пикселями?

То, что я ожидаю, независимо от того, изменяете ли вы размеры, перекомпоновку, увеличение или уменьшение масштаба, прямоугольник, такие SVG-элементы просто идут с индексом оси X и данными серии y. а именно, автоматическое позиционирование, автоматическое изменение размера, сопровождаемое индексным номером оси x и данными серии y

Я просто не могу понять, почему Highcharts SVG спроектирован таким образом, что создает проблемы, это действительно неудобно по сравнению с некоторыми традиционными модулями печати, такими как matplotlib. Спасибо!

до изменения размера

не в порядке после изменения размера

область highcharts css

highcharts-graph css

highcharts-tracker css

1 Ответ

0 голосов
/ 06 июля 2018

Ваше требование состоит в том, чтобы красный прямоугольник вел себя как серия (с точки зрения отзывчивости).

Highcharts предлагает тип серии polygon, который был бы хорошим решением для этого случая, если бы скругленные углы не были вашими требованиями (полигон их не поддерживает).

Похоже, что серия columnrange с соответствующим стилем выполняет свою работу (благодаря свойству borderRadius): 

{
    groupPadding: false,
    pointPadding: 0,
    borderRadius: 10,
    showInLegend: false,
    borderColor: 'red',
    borderWidth: 2,
    color: 'none',
    type: 'columnrange',
    pointRange: 4,
    data: [{
      x: 3,
      low: 1,
      high: 24,
    }]

pointRange работает в обоих направлениях, поэтому, если оно равно 4 и x равно 3, столбец будет охватывать от 1 до 5. groupPadding: false и pointPadding: 0 приводит к тому, что прямоугольник представляет точные значения .

Живая демоверсия: http://jsfiddle.net/BlackLabel/gd0v9Lop/

Ссылка API: https://api.highcharts.com/highcharts/s

...