Question

我有一个带有负值和正值的水平条形图，我注意到网格线向左稍微偏移（可能会变圆吗？）。这是一张说明我的问题的图像：

我尝试在fiddle中重现它，但结果略有不同（请导出png以查看图像）。很难注意到，但是负数条并非从零开始。

因此，我很想知道问题的根本原因以及您可能提出的潜在解决方案。预先感谢！

Highcharts.chart('container', {

    chart: {

        type: 'bar',
        styledMode: true,
        events: {
        load: function(){
            const chart = this;
          const gridLines = chart.yAxis[0].gridGroup.element.querySelectorAll('path');
            console.log(gridLines);
            const yTicks = chart.yAxis[0].ticks;
            for(let tick of Object.keys(yTicks)){
              if(yTicks[tick].pos === 0) {
                const zeroGridLine = yTicks[tick].gridLine.element;
                zeroGridLine.classList.replace('highcharts-grid-line','zero-line');
                if(chart.seriesGroup) chart.seriesGroup.element.appendChild(zeroGridLine)
                break;
              }
  }
        }
        }
    },

    title: {
        text: 'title'
    },

    xAxis: {
        categories: ['Medical care',
'Shelter',
'Personal services',
'Education',
'Furnishings',
'Communication',
'Recreation',
'Fuels and utilities',
'Apparel',
'Transportation',],
        lineWidth: 1,
        labels: {
        align: 'left',
        reserveSpace: true,
        step: 1,
        x:-5,
/*         max: 9.5,
        min: -0.5, */
        style: {
        whiteSpace: 'wrap',
        textOverflow: 'visible'
        }
        }
    },

    yAxis: {


        tickWidth: 1
    },

    series: [{
        name: 'April 2020',
        data: [
           4.81, 2.62, 2.53, 2.15, 1.31, 1.12, 0.94, -0.35, -3, -8]
    }, {
        name: 'Jan 2020',
        data: [4.48, 3.32, 2.11, 2.17, 0.66, 0.93, 1.41, 0.57, -1.26, 2.87]
    }]
    })

@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  min-width: 300px;
  max-width: 300px;
  height: 300px;
  margin: 1em auto;
}
.highcharts-xaxis-labels {
  font-size: 15px;
}
.zero-line {
  stroke: black;
  stroke-width: 1;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>

Answer 1

我认为这是一个错误。我在Highcharts Github问题频道上报告了该问题，您可以在该频道上关注此话题或对此行为发表自己的看法。核心开发人员会回复您。

https://github.com/highcharts/highcharts/issues/14302

highcharts-在水平条形图中导出png

1 个答案: