Точка размещения для столбца, когда два столбца отображаются на одном графике - PullRequest
0 голосов
/ 10 октября 2019

Я показываю две серии в виде столбцов на графике. Первая серия представляет дневное значение, а вторая серия представляет часовое значение. Я хочу, чтобы дневная серия начиналась в 6 утра того же дня и заканчивалась на следующий день в 6 утра. Это работает нормально с точкой размещения = 0,5. Но только когда сериал показывается один. Когда он показывается вместе с серией часов, точка размещения больше не работает. Как это можно сделать правильно? https://jsfiddle.net/Kjellis/esg0hur7/60/

Highcharts.chart('container',{
       chart: {
           zoomType: 'x',
           events: {
            load: function () {  
                if(this.series.length >1 ){

                 if(this.xAxis[0].series[0].points.length>1){                         this.series[0].options.pointPlacement = 0.5;
                    var t=this.xAxis[0].series[0].points[1].plotX - this.xAxis[0].series[0].points[0].plotX 
                    this.series[0].options.pointWidth=t;
                 }


                  this.series[0].options.pointPlacement = 0.5;
                  this.series[0].update(this.series[0].options);
                  this.series[1].update(this.series[1].options);
                }
            },
            },


        },   

        title: {
            text: 'Highcharts columns'
        },
        xAxis: {
            type: 'datetime',
                dateTimeLabelFormats: {
                    second: '%d-%m-%Y<br/>%H:%M:%S',
                    minute: '%d-%m-%Y<br/>%H:%M',
                    hour: '%d-%m-%Y<br/>%H:%M',
                    day: '%d-%m<br/>%Y',
                    week: '%d-%m<br/>%Y',
                    month: '%Y-%m',
                    year: '%Y'
                },
                plotLines: [{
                    color: 'black', 
                    width: 2,
                    value: Date.now() 
                }]
            },

        series:[
        {
            type: 'column',
          data:[
          [1557813600000,12.6],
          [1557900000000,30],
          [1557986400000,10]]
        },
        {
            type: 'column',
          data:[
          [1557813600000, 1],
          [1557817200000, 2],
          [1557820800000, 0],
          [1557824400000, 3],
          [1557828000000, 4],
          [1557831600000, 5],
          [1557835200000, 6],
          [1557838800000, 7],
          [1557842400000, 0],
          [1557846000000, 1],
          [1557849600000, 2],
          [1557853200000, 3],
          [1557856800000, 5],
          [1557860400000, 6],
          [1557864000000, 7],
          [1557867600000, 0],
          [1557871200000, 0],
          [1557874800000, 0],
          [1557878400000, 1],
          [1557882000000, 2],
          [1557885600000, 0],
          [1557889200000, 0],
          [1557892800000, 0],
          [1557896400000, 3],
          [1557900000000, 3],
          [1557903600000, 4],
          [1557907200000, 6],
          [1557910800000, 0],
          [1557914400000, 1],
          [1557918000000, 10],
          [1557921600000, 1],
          [1557925200000, 0],
          [1557928800000, 30],
          [1557932400000, 4],
          [1557936000000, 3],
          [1557939600000, 0],
          [1557943200000, 3],
          [1557946800000, 0],
          [1557950400000, 2],
          [1557954000000, 0],
          [1557957600000, 0],
          [1557961200000, 5],
          [1557964800000, 7],
          [1557968400000, 5],
          [1557972000000, 3],
          [1557975600000, 0],
          [1557979200000, 0],
          [1557982800000, 3],
          [1557986400000, 0],
          [1557990000000, 0],
          [1557993600000, 0],
          [1557997200000, 7],
          [1558000800000, 6],
          [1558004400000, 2],
          [1558008000000, 3],
          [1558011600000, 5],
          [1558015200000, 5],
          [1558018800000, 10],
          [1558022400000, 4],
          [1558026000000, 7],
          [1558029600000, 0],
          [1558033200000, 0],
          [1558036800000, 6],
          [1558040400000, 5],
          [1558044000000, 4],
          [1558047600000, 3],
          [1558051200000, 1],
          [1558054800000, 1],
          [1558058400000, 10],
          [1558062000000, 0]
          ]
          }]});

1 Ответ

0 голосов
/ 11 октября 2019

Вам необходимо отключить grouping и установить правильные значения pointRange:

series: [{
        type: 'column',
        pointRange: 1000 * 60 * 60 * 24, // 1 day
        grouping: false,
        data: [...]
    },
    {
        type: 'column',
        pointRange: 1000 * 60 * 60, // 1 hour
        grouping: false,
        data: [...]
    }
]

Демонстрационная версия: https://jsfiddle.net/BlackLabel/esjmLb2t/

Справочник по API:

https://api.highcharts.com/highcharts/series.column.grouping

https://api.highcharts.com/highcharts/series.column.pointRange

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...