Почему графики с высокими диаграммами не масштабируются так, как я ожидаю?

Question

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

Тест находится в jsFiddle здесь .

Этот тест показывает различные версии диаграммы:

• Тест диаграммы [A] = pane.size = 100% / размер контейнера = 400px x 400px.

• Тест диаграммы [B] = pane.size = 140% / размер контейнера = 400px x 400px.

• Тест диаграммы [C] = pane.size= 100% / размер контейнера = 400px x 300px.

• Диаграмма теста [D] = pane.size = 140% / размер контейнера = 400px x 300px.

Используются следующие основные параметры диаграммы:

{
        chart: {
          type: 'solidgauge'
        },
        credits: false,
        title: {
          text: 'Solid Gauge'
        },
        yAxis: {
          minorTickInterval: null,
          min: 0,
          max: 100
        },
        pane: {
          center: ['50%', '85%'],
          size: '140%', // ISSUE: problem scaling chart outside container
          //size: '100%', // ISSUE: problem with gap above gauge
          startAngle: -90,
          endAngle: 90,
          background: {
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
          }
        },
        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              decimalPlaces: 1,
              units: 'rpm',
              borderWidth: 0,
              useHTML: true,
              format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ('black') + '">{point.y:.11f}</span><br/>' +
                '<span style="font-size:12px;color:silver">rpm</span></div>'
            }
          }
        },
        tooltip: {
          enabled: false
        }
      };

Chart [A] - это нормально, но если я использую тот же размер панели (100%) и уменьшу высоту (до 300 пикселей), чтобы удалитьразрыв между заголовком и графиком, тогда я получаю [C], где график был уменьшен слишком мало.Точно так же chart [D] - это нормально, но если я использую тот же размер панели (140%) и увеличу высоту (до 400 пикселей), тогда график выходит за пределы контейнера, как показано в [B].

Есть ликакие-либо опции, которые мне не хватает, которые можно использовать для решения этой проблемы, или мне придется динамически корректировать диаграмму в зависимости от размера контейнера (которого я хочу избежать)?

Answer 1

Как вы можете прочитать на форуме Highcharts здесь: https://www.highcharts.com/forum/viewtopic.php?t=33070

Сплошная колея создается из углового манометра.Фон является одним из ключевых элементов, которые делают диаграмму похожей на дугообразную сплошную линию.Если вы отключите его, вы увидите, что параметры, используемые для внутреннего радиуса и внешнего радиуса, а также размера или центра панели, рассчитываются для круга, но дуга используется для визуализации.

Итак, удалитеstartAngle и endAngle, чтобы увидеть, как масштабируется диаграмма.Как вы можете заметить, он масштабируется как круг, а дуга используется только для визуализации.Вот почему он действует так странно из-за массивной архитектуры.

Демонстрация:

• https://jsfiddle.net/BlackLabel/mtevb2d3/