HighCharts - как динамически устанавливать поля?

#twitter-bootstrap #highcharts

#twitter-bootstrap #высокие диаграммы

Вопрос:

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

Все должно выглядеть так:


Col-1	Col-10	Col-1
Метки по оси X	График графика-область	2. Метки осей
Col-1	Col-10	Col-1

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

Моя конфигурация выглядит так:

 Highcharts.chart('container', {
chart: {
type: "column",
marginLeft: 65 // <= Dynamically or percent?
},

yAxis: {
    title: {
        text: null
    }
},

series: [{ }]
}

JSFiddle

Есть идеи?

Спасибо!

Ответ №1:

Вы можете динамически вычислять и устанавливать поля на основе некоторого процентного значения, например:

     chart: {
        ...,
        events: {
            render: function() {
                if (allowChartUpdate) {
                    var dynamicMargin = this.chartWidth * 8.333333 / 100;
                    allowChartUpdate = false;

                    this.update({
                        chart: {
                            marginLeft: dynamicMargin,
                            marginRight: dynamicMargin
                        }
                    }, true, true, false);

                    allowChartUpdate = true;
                }
            }
        }
    }

Живая демонстрация: https://jsfiddle.net/blackLabel/913scgxa/

Ссылка на API: https://api.highcharts.com/highcharts/chart.events.render

Ответ №2:

Вместо того, чтобы пытаться разделить элементы диаграммы на разные столбцы, было бы довольно просто добиться того же визуального эффекта с помощью CSS (при условии, что ось диаграммы фиксированной ширины / .col-1 ): https://jsfiddle.net/7z93n1md/1 /

 Highcharts.chart('container', {
    chart: {
    type: "column",
    marginLeft: 65 // <= Dynamically or percent?
    },

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: null
        }
    },

    legend: {
        align: 'right',
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales amp; Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }]

});

 .container-fluid .col-1,
.container-fluid .col-10{
  border-right: 1px solid blue;
  height: 100%;
}
.highcharts-figure {
    min-width: 100%;
    width: 100%,
}

/* Added the below */
.row .col-1 {
  flex: 0 0 65px;
  max-width: 65px;
}

.row .col-10 {
  flex: 0 0 calc(100% - 130px);
  max-width: calc(100% - 130px);
  padding: 0;
}

.row .col-12 {
  flex: 0 0 calc(100% - 65px);
  max-width: calc(100% - 65px);
  padding: 0;
}

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="container-fluid">
 <div class="row">
  <div class="col-1">Col-1</div>
  <div class="col-10">Col-10</div>
  <div class="col-1">Col-1</div>
 </div>
 <div class="row">
  <div class="col-12">
   <figure class="highcharts-figure">
    <div id="container"></div>
  </figure>
 </div>
</div>

Развернуть фрагмент кода

1. Блестящее решение! Спасибо. Проблема заключается в фиксированном первом столбце, который должен быть гибким.

2. Добро пожаловать 🙂 Похоже, highcarts позволяет устанавливать только значение левого края в пикселях, поэтому либо его нужно исправить, либо .col-1 его нужно стилизовать так, чтобы он соответствовал автоматической ширине динамического поля диаграммы по умолчанию, если значение левого края не задано. Может быть, есть другая библиотека построения графиков, которая позволила бы это?