Highcharts元素未对齐

Posted 2021-05-05

我试图将dict中包含的数据拆分成多个图表。每个图表都有两个系列：列和标记。如果在单个图表中表示所有数据，一切正常，但如果我尝试拆分它，列和标记由于某种原因不会对齐

function setup_chart(chart_container){
       return new Highcharts.chart(chart_container, {
          chart: {
            alignTicks: false,
            type: 'columnrange',
            inverted: true,
            zoomType: 'y',
            panning: true,

            },
            credits: {
                    enabled: false
            },
            title: {
                text: null
            },
            xAxis: {
                categories: [],
                className: 'chart-axis-title',
                title: {                       
                    align:'high'
                },                    
                offset: -10
            },
            navigation: {
                buttonOptions: {
                    x: 5,
                    y: -12
                }
            },
            yAxis:[{
                minRange: 1,
                max:null,
                min:null,
                allowDecimals: false,
                title: {
                    text: 'Days'
                },
                labels:{
                    formatter:function(){
                        if(this.value !=0){
                            return this.value;
                        }
                    }
                }                    
              },{
                  tickPositions: [0, 100],
                  visible: false
              }],

              tooltip: {                

              },
              exporting: {
                  scale: 3,
                  chartOptions: {
                      legend: {
                          enabled: true
                      }
                  }                            
              },
              legend: {
                  enabled: false
              },
              series: [{
                        yAxis: 1,
                        data:[]
                        },{
                        name: 'Days',
                        data: [],
                        stickyTracking: true
                        }]
          });
   }

我通过jinja2传递数据并按以下方式填充图表：

var options_data_cm = {{options|tojson|safe}}[k]['cms'];
var cm_groups = {{cm_group_dict}};
var cms_details = {};
for(var key in cm_groups){
    cms_details[key] = {
        "data":[],
        "left":[],
        "right":[],
        "cols":[],
        "categories":[]
     }
}
for(var key in cms_details){
                 var crtChart = $('#'+key).highcharts(); 
                 crtChart.xAxis[0].update({title:{ text: ""+cm_groups[key] }});
                 crtChart.addSeries({
                     type: 'column',
                     yAxis: 1,                     
                     data: cms_details[key]['cols'],                     
                     zIndex: 1,
                     minPointLength: 10,
                     threshold: -0.1,
                     pointPadding: 0,
                     pointRange: 0,
                     groupPadding: 0,
                     showInLegend: false,
                     tooltip: {
                         pointFormat: false
                     },
                     states: {
                         hover: {
                             enabled: false
                         }
                     }                 
                 });
                 crtChart.addSeries({
                     name: "Study Days",
                     dataLabels: {
                         enabled: false,
                         padding: 10,
                         borderWidth: 0,
                         usehtml:false,
                         formatter:function(){ 
                                if(this.y != 0)
                                    return this.y;
                            }
                     },
                     stickyTracking: false,
                     data: cms_details[key]['data'],
                     borderWidth: 0,
                     zIndex: 5,
                     maxPointWidth: 5,
                     tooltip:{
                         followPointer:true
                     },
                     point: {
                         events: {
                             click: function() {
                                 if (url != "")
                                     window.open(url,'_blank');                                 
                             }
                         }
                     }
                 });
                 crtChart.addSeries({
                 type:'scatter',
                 stickyTracking:false,
                 tooltip:{snap:0},
                 data:cms_details[key]['left'],
                 zIndex: 1
             });
                 crtChart.addSeries({
                 type:'scatter',
                 stickyTracking:false,
                 tooltip:{snap:0},
                 data:cms_details[key]['right'],
                 zIndex: 1
             });  
                 crtChart.xAxis[0].setCategories(cms_details[key]['categories']);
             }

这是两张图片，第一张是分配而不是将数据分成多个图表，第二张是试图分割它：

我试图检查数据的内容，从某种意义上说两者都有相同的坐标似乎没问题，但是它们会被移动。

编辑：

这是jsfiddle的链接

答案

我设法通过将pointPlacement: 0.2添加到被取代的系列来解决这个问题。