时间戳

首页 > 解决方案 > 在 highCharts 中，当对数据使用索引时，每个类别都留有很多空间

javascript - 在 highCharts 中，当对数据使用索引时，每个类别都留有很多空间

问题描述

我是 HighCharts 的新手；在我们的项目中，我们使用下面的代码，我们在其中给出索引值和数据（我将无法发布实际代码）

      data.push([indx,getRandomInt(50)]);                       
      splitSeries[i].push({
          "name" : optionData.series[m].name,
          "data" : data
      });

但是我们面临两个问题

  1. 尽管第一个类别的条数更多，但类别被平均划分。
  2. 每个类别的底部都有很多空间。

    渲染后的图表



如何解决这些问题，请帮忙。

添加jsfiddle

标签： javascripthighcharts

解决方案

我不确定我是否正确理解了您的问题，但@ppotaczek 的上述回答对我来说似乎没问题。

请在fiddle上参考这个工作示例演示。



在这里，我添加gridLineWidth: 1并tickmarkPlacement: "between"证明滴答声实际上是从中间传递的。

正如@ppotaczek 所说：您可以通过更改pointPadding和groupPadding属性来更改点之间的距离。

请让我知道，如果这对你有用！:)




由于指向 fiddle.net 的链接必须附有代码，因此我将其包括在此处： 

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      inverted: true,
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: ['2018-06', '2018-07', '2018-08', '2018-09', '2018-10'],
      tickWidth: 1,
      tickmarkPlacement: "between",
      gridLineWidth: 1
    },
    yAxis: {
      min: -10,
      title: {
        text: 'Total fruit consumption'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold'
        }
      }
    },
    legend: {
    enabled :false,
      align: 'right',
      x: -70,
      verticalAlign: 'top',
      y: 20,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.x + '</b><br/>' +
          this.series.name + ': ' + this.y + '<br/>' +
          'Total: ' + this.point.stackTotal;
      }
    },
   
    plotOptions: {
      series: {
        groupPadding: 0.99,
        pointPadding: 0.99
      }
    },
    series: [{
      name: 'Q1',
      data: [
        [0, -5],
        [1, 3],
        [2, 4],
        [3, 7],
        [4, -2]
      ]
    }, {
      name: 'Q2',
      data: [
        [0, 5],
        [1, -3],
        [2, 4],
        [3, -7],
        [4, 2]
      ]
    }, {
      name: 'Q3',
      data: [
        [1, 3],
        [1, -4],
        [2, 7],
        [4, 2]
      ]
    }]
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

推荐阅读