Динамически добавьте ось Y к старшей диаграмме внизу 1-го графика, не уменьшая размер предыдущего графика. - PullRequest
Новая
       12

Динамически добавьте ось Y к старшей диаграмме внизу 1-го графика, не уменьшая размер предыдущего графика.

0 голосов
/ 08 ноября 2019

Я пытаюсь добавить новую ось и серию Y к уже инициализированному графику внизу инициализированного графика. Прямо сейчас, когда я добавляю ось Y, она добавляется на том же уровне. Я попытался добавить «top» (смещение от вершины графика), но новый график обрезается, поскольку область уже инициализированного графика стала фиксированной (400px). Я пытался увеличить высоту контейнера, прежде чем добавить новую ось, но все равно она не работает. Уничтожить диаграмму и перерисовать ее очень громоздко и, на мой взгляд, не самый лучший подход. 

let charts = Highcharts.charts;

           charts.forEach((chart, index) => {
               if (chart.renderTo.id === `chart-${item.x}`) {
                   this.chosenChart = chart;
                   this.chosenChart.containerHeight = this.chosenChart.chartHeight + 400;
                   this.chosenChart.addAxis({
                       id: item.y,
                       title: {
                           text: item.dimensions[0].name
                       },
                       height: '50%',
                      top: `${top}%`

                   });
               }

Ответы [ 2 ]

0 голосов
/ 13 ноября 2019

Использовал setSize старших диаграмм для увеличения размера контейнера.

примерно так ниже:

this.chosenChart.setSize (undefined, this.chosenChart.chartHeight + 200);

https://api.highcharts.com/class-reference/Highcharts.Chart#setSize

0 голосов
/ 09 ноября 2019

Размер Highchart отображается с шириной и высотой контейнера.

Даже если вы измените высоту контейнера, как указано выше, это не сработает. Ваш 2-й yaxis всегда будет похож на этот Пример 2 yaxis

Поэтому я предлагаю вам использовать 2 графика или highstocks, если ваши данные такие же Highstock 

Highcharts.chart('container', {
    chart: {
        marginRight: 80 // like left
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: [{
        lineWidth: 1,
        title: {
            text: 'Primary Axis'
        }
    }, {
        lineWidth: 1,
        opposite: true,
        title: {
            text: 'Secondary Axis'
        }
    }],

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2],
        yAxis: 1
    }]
});
<div id="container" style="height: 400px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
...