0

в режиме stacking: 'normal' шкала слева строится на основе суммы колонок. Как сделать чтобы она строилась на основании максимального значения? Надо вот так:chart

    let categories = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
    let day = [12,14,17,20,26,33,35,37,33,23,18,14];
    let night = [6,10,12,14,18,23,24,26,25,18,13,10];
    let title =  'Погода';

    Highcharts.chart('js-tt-seo-weather', {
      chart: {
        type: 'column'
      },
      title: {
        text: title,
        align: 'left',
        style: {
          "font-size": "18px",
          "font-weight": "bold",
          "font-family": "Roboto"
        }
      },
      tooltip: {
        enabled: false
      },
      xAxis: {
        categories: categories,
        labels: {
          style: {
            "color": "#8F969A",
            "font-size":"14px",
            "font-family": "Roboto"
          }
        }
      },
      yAxis: {
        title: {
          text: null
        },

      },
      credits: false,
      legend: {
        align: 'right',
        verticalAlign: 'top',
        floating: true,
        backgroundColor: "#ffffff",
        shadow: false
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            verticalAlign: 'top',
            y: -20,
            "formatter": function () { return this.y + '°'; }
          }
        }
      },
      series: [{
        name: ' t днем, °С',
        data: day,
        color: '#FFBD46',
        borderWidth: 0,
      }, {
        name: ' t ночью, °С',
        data: night,
        color: '#4B6493',
        borderWidth: 0,
        dataLabels: {
          enabled: false}
      }],
    });
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="js-tt-seo-weather" style=""></div>

1 ответ 1

0

Проблема не совсем в шкале у вас. Во-первых стэк-график это всегда сумма. Но посмотрите, если вы даже измените шкалу чтобы там показывалась дневная температура, то обратите внимание на масштаб столбиков. Когда у вас допустим ночью 20, а днем 30, и даже пусть вы нарисуете на шкале 30, то высота столбика то будет не той. Чтобы ночные 20 до 30 дневных нарисовть надо всего 10 накинуть, а на рисунке будет старые +30. То есть будет некоторая диспропорция в значениях столбиков.

в общем, стэк это сумма. Наиболее простое решение, наверное, принять допущение, что средние дневные нормы месяца всегда выше ночных и рисовать серию для ночи как обычно, а для дневной как День минус ночь, а в качестве метки выводить просто дневную. Это целиком и полностью решит ваш вопрос.

let categories = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];    
    let day   = [12,14,17,20,26,33,35,37,33,23,18,14];
    let night = [6,10,12,14,18,23,24,26,25,18,13,10];    

    Highcharts.chart('js-tt-seo-weather', {
      chart: {
        type: 'column'
      },
      title: { text: null },
      
      xAxis: {  categories: categories },
      yAxis: {
        title: {
          text: null
        },

      },
      credits: false,      
      plotOptions: {
        column: {
          stacking: 'normal',          
        }
      },
      series: [{
        name: ' t днем, °С',
        data: day.map(function(v, idx){ return v - night[idx];}),
        color: '#FFBD46', 
        dataLabels: {        
            enabled: true,
            verticalAlign: 'top',
            y: -20,
            formatter: function(){ return day[this.point.x]+ "°"; }
        },
        tooltip:  {
            pointFormatter: function(){
                return `<span style="color: ${this.color} ">\u25CF</span> ${this.series.name}: <b>${day[this.x]}</b>`;
            }
        }
      }, {
        name: ' t ночью, °С',
        data: night,
        color: '#4B6493',                
      }],
    });
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="js-tt-seo-weather" style=""></div>

и форматтер тултипа подправить.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.