减少Highcharts中列之间的空间

Question

我有2个系列的高图表。

我尝试按如下所示设置属性，但列之间的间隔没有减少。

column: {
        pointPadding: 0, //also tried 0.1
        pointWidth: 35,
        groupPadding:0.1, // also tried 0
        borderWidth: 0
      },

如何更改列之间的间距，我想固定35px的宽度。

这是我的源代码。谢谢

var ConstantsConfigChart = {
  colorText: "#444",
  fontsize12: "12px",
  fontsize14: "14px",
  fontsize16: "16px"
}
var Constants = {
  OKWON: 100000000
}
let topRightOption = {
  chart: {
    type: 'column',
    spacingBottom: 0,
    spacingTop: 10,
    spacingLeft: 0,
    spacingRight: 0,
    animation: false
  },
  title: {
    text: 'Unit',
    align: 'left',
    style: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14
    },
    margin: 0,
    x: 0,
    y: 12,
  },

  xAxis: {
    categories: [],
    crosshair: true,
    labels: {
      style: {
        color: ConstantsConfigChart.colorText,
        fontSize: ConstantsConfigChart.fontsize14,
        fontWeight: 'bold'
      }
    }
  },
  yAxis: [{
      min: 0,
      title: {
        text: ' '
      },
      labels: {
        style: {
          color: ConstantsConfigChart.colorText,
          fontSize: ConstantsConfigChart.fontsize12
        },
        formatter: function() {
          return Highcharts.numberFormat(this.value / Constants.OKWON, 1);
        }
      }
    },
    {
      title: {
        text: ' ',
        style: {}
      },
      labels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.value, 1);
        },
        style: {
          color: ConstantsConfigChart.colorText,
          fontSize: ConstantsConfigChart.fontsize12
        }
      },
      opposite: true,
      offset: 10,
      crosshair: true
    }
  ],
  tooltip: {
    shared: true,
    formatter: function() {
      var tooltip = [],

        title = "<span class=\"TooltipText12\">" + this.x + "</span><br/>";
      tooltip.push(title + '<br>');
      $.each(this.points, function(i, point) {
        if (i < 2) {
          tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + Highcharts.numberFormat(this.point.y / Constants.OKWON, 1) + '<span style="padding:0"> 억원</span> <br/>');
        } else {
          tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + this.point.y + '<span style="padding:0">%</span> <br/>');
        }

      });

      return tooltip.join('');
    },
    style: {
      fontWeight: 'normal',
      fontSize: ConstantsConfigChart.fontsize14
    }
  },
  plotOptions: {
    column: {
      pointPadding: 0,
      pointWidth: 35,
      groupPadding: 0.1,
      borderWidth: 0
    },
    series: {
      animation: false
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  colors: ['#fe7c7c', '#43d487', '#ff9600'],
  series: [],
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom',
    itemStyle: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14,
      fontWeight: 'normal'
    }
  }
};

data = {
  "StatisticGoalFee": [{
      "Name": "(BOARD)",
      "Value": 900000000.0
    },
    {
      "Name": "(COMPONENT)",
      "Value": 700000000.0
    },
    {
      "Name": "(MODULE)",
      "Value": 770000000.0
    }
  ],
  "StatisticRealFee": [{
      "Name": "(BOARD)",
      "Value": 860000000.0
    },
    {
      "Name": "(COMPONENT)",
      "Value": 460000000.0
    }, {
      "Name": "(MODULE)",
      "Value": 590000000.0
    }
  ],
  "ProgressKRW100Rate": [{
      "Name": "(BOARD)",
      "Value": 0.5
    },
    {
      "Name": "(COMPONENT)",
      "Value": 117.9
    },
    {
      "Name": "(MODULE)",
      "Value": 3.0
    }
  ]
};



let seriesGoal = data.StatisticGoalFee.map(c => ({
  name: c.Name,
  y: c.Value
}));
let seriesReal = data.StatisticRealFee.map(c => ({
  name: c.Name,
  y: c.Value
}));
let rates = data.ProgressKRW100Rate.map(c => ({
  name: c.Name,
  y: c.Value
}));
topRightOption.xAxis.categories = seriesGoal.map(c => c.name);

//this.bottomRightOption.series[1].data = seriesReal;
var top_right = Highcharts.chart('container', topRightOption);
top_right.addSeries({
  name: "도전",
  data: seriesGoal,
  dataLabels: {
    enabled: true,
    padding: 5,
    style: {
      color: ConstantsConfigChart.colorText,
      textOutline: false,
      fontSize: ConstantsConfigChart.fontsize14,
      fontWeight: 'normal'
    },
    align: 'right',
    stackLabels: {
      enabled: true
    },
    formatter: function() {
      return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
    }
  }
});

top_right.addSeries({
  name: "실적",
  data: seriesReal,
  dataLabels: {
    enabled: true,
    padding: 5,
    style: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14,
      textOutline: false,
      fontWeight: 'normal',
    },
    align: 'left',
    stackLabels: {
      enabled: true
    },
    formatter: function() {
      return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
    }
  }
});

<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

JS小提琴https://jsfiddle.net/viethien/vkm4eLdp/8/

Answer 1

我刚刚尝试为系列添加配置

series: {
        animation: false,
        pointWidth: 35,
        groupPadding: 0.4,
}

并删除groupPadding:0.1, //groupPadding:0.1,

现在更好了，但是我想有更好的解决方案。

最后，当我调整屏幕列大小的大小时，我发现了maxpointWidth选项，其值为maxpointWidth：35。

var ConstantsConfigChart = {
  colorText: "#444",
  fontsize12: "12px",
  fontsize14: "14px",
  fontsize16: "16px"
}
var Constants = {
  OKWON: 100000000
}
let topRightOption = {
  chart: {
    type: 'column',
    spacingBottom: 0,
    spacingTop: 10,
    spacingLeft: 0,
    spacingRight: 0,
    animation: false
  },
  title: {
    text: 'Unit',
    align: 'left',
    style: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14
    },
    margin: 0,
    x: 0,
    y: 12,
  },

  xAxis: {
    width: '350px',
    categories: [],
    crosshair: true,
    labels: {
      style: {
        color: ConstantsConfigChart.colorText,
        fontSize: ConstantsConfigChart.fontsize14,
        fontWeight: 'bold'
      }
    }
  },
  yAxis: [{
      min: 0,
      title: {
        text: ' '
      },
      labels: {
        style: {
          color: ConstantsConfigChart.colorText,
          fontSize: ConstantsConfigChart.fontsize12
        },
        formatter: function() {
          return Highcharts.numberFormat(this.value / Constants.OKWON, 1);
        }
      }
    },
    {
      title: {
        text: ' ',
        style: {}
      },
      labels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.value, 1);
        },
        style: {
          color: ConstantsConfigChart.colorText,
          fontSize: ConstantsConfigChart.fontsize12
        }
      },
      opposite: true,
      offset: 10,
      crosshair: true
    }
  ],
  tooltip: {
    shared: true,
    formatter: function() {
      var tooltip = [],

        title = "<span class=\"TooltipText12\">" + this.x + "</span><br/>";
      tooltip.push(title + '<br>');
      $.each(this.points, function(i, point) {
        if (i < 2) {
          tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + Highcharts.numberFormat(this.point.y / Constants.OKWON, 1) + '<span style="padding:0"> 억원</span> <br/>');
        } else {
          tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + this.point.y + '<span style="padding:0">%</span> <br/>');
        }

      });

      return tooltip.join('');
    },
    style: {
      fontWeight: 'normal',
      fontSize: ConstantsConfigChart.fontsize14
    }
  },
  plotOptions: {
    column: {
      pointPadding: 0.05,
      pointWidth: 35,
      //groupPadding: 0.1,
      borderWidth: 0
    },
    series: {
      animation: false,
      pointWidth: 35,
      groupPadding: 0.4,
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  colors: ['#fe7c7c', '#43d487', '#ff9600'],
  series: [],
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom',
    itemStyle: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14,
      fontWeight: 'normal'
    }
  }
};

data = {
  "StatisticGoalFee": [{
      "Name": "(BOARD)",
      "Value": 900000000.0
    },
    {
      "Name": "(COMPONENT)",
      "Value": 700000000.0
    },
    {
      "Name": "(MODULE)",
      "Value": 770000000.0
    }
  ],
  "StatisticRealFee": [{
      "Name": "(BOARD)",
      "Value": 860000000.0
    },
    {
      "Name": "(COMPONENT)",
      "Value": 460000000.0
    }, {
      "Name": "(MODULE)",
      "Value": 590000000.0
    }
  ],
  "ProgressKRW100Rate": [{
      "Name": "(BOARD)",
      "Value": 0.5
    },
    {
      "Name": "(COMPONENT)",
      "Value": 117.9
    },
    {
      "Name": "(MODULE)",
      "Value": 3.0
    }
  ]
};



let seriesGoal = data.StatisticGoalFee.map(c => ({
  name: c.Name,
  y: c.Value
}));
let seriesReal = data.StatisticRealFee.map(c => ({
  name: c.Name,
  y: c.Value
}));
let rates = data.ProgressKRW100Rate.map(c => ({
  name: c.Name,
  y: c.Value
}));
topRightOption.xAxis.categories = seriesGoal.map(c => c.name);

//this.bottomRightOption.series[1].data = seriesReal;
var top_right = Highcharts.chart('container', topRightOption);
top_right.addSeries({
  name: "도전",
  data: seriesGoal,
  dataLabels: {
    enabled: true,
    padding: 5,
    style: {
      color: ConstantsConfigChart.colorText,
      textOutline: false,
      fontSize: ConstantsConfigChart.fontsize14,
      fontWeight: 'normal'
    },
    align: 'right',
    stackLabels: {
      enabled: true
    },
    formatter: function() {
      return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
    }
  }
});

top_right.addSeries({
  name: "실적",
  data: seriesReal,
  dataLabels: {
    enabled: true,
    padding: 5,
    style: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14,
      textOutline: false,
      fontWeight: 'normal',
    },
    align: 'left',
    stackLabels: {
      enabled: true
    },
    formatter: function() {
      return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
    }
  }
});

<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

Answer 2

为此可能的解决方案是使用Axis resizer，但这将改变整体宽度，而不仅是条之间的间距。

请记住，由于此解决方案使用固定的px值，因此您将需要根据条数计算该值。

xAxis: {
   width: '350px',
   // ...
}

var ConstantsConfigChart = {
  colorText: "#444",
  fontsize12: "12px",
  fontsize14: "14px",
  fontsize16: "16px"
}
var Constants = {
  OKWON: 100000000
}
let topRightOption = {
  chart: {
    type: 'column',
    spacingBottom: 0,
    spacingTop: 10,
    spacingLeft: 0,
    spacingRight: 0,
    animation: false
  },
  title: {
    text: 'Unit',
    align: 'left',
    style: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14
    },
    margin: 0,
    x: 0,
    y: 12,
  },

  xAxis: {
    width: '350px',
    categories: [],
    crosshair: true,
    labels: {
      style: {
        color: ConstantsConfigChart.colorText,
        fontSize: ConstantsConfigChart.fontsize14,
        fontWeight: 'bold'
      }
    }
  },
  yAxis: [{
      min: 0,
      title: {
        text: ' '
      },
      labels: {
        style: {
          color: ConstantsConfigChart.colorText,
          fontSize: ConstantsConfigChart.fontsize12
        },
        formatter: function() {
          return Highcharts.numberFormat(this.value / Constants.OKWON, 1);
        }
      }
    },
    {
      title: {
        text: ' ',
        style: {}
      },
      labels: {
        enabled: true,
        formatter: function() {
          return Highcharts.numberFormat(this.value, 1);
        },
        style: {
          color: ConstantsConfigChart.colorText,
          fontSize: ConstantsConfigChart.fontsize12
        }
      },
      opposite: true,
      offset: 10,
      crosshair: true
    }
  ],
  tooltip: {
    shared: true,
    formatter: function() {
      var tooltip = [],

        title = "<span class=\"TooltipText12\">" + this.x + "</span><br/>";
      tooltip.push(title + '<br>');
      $.each(this.points, function(i, point) {
        if (i < 2) {
          tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + Highcharts.numberFormat(this.point.y / Constants.OKWON, 1) + '<span style="padding:0"> 억원</span> <br/>');
        } else {
          tooltip.push("<span style=\"color:" + this.point.color + "\">●</span> " + this.series.name + ": " + this.point.y + '<span style="padding:0">%</span> <br/>');
        }

      });

      return tooltip.join('');
    },
    style: {
      fontWeight: 'normal',
      fontSize: ConstantsConfigChart.fontsize14
    }
  },
  plotOptions: {
    column: {
      pointPadding: 0,
      pointWidth: 35,
      groupPadding: 0.1,
      borderWidth: 0
    },
    series: {
      animation: false
    }
  },
  exporting: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  colors: ['#fe7c7c', '#43d487', '#ff9600'],
  series: [],
  legend: {
    layout: 'horizontal',
    align: 'center',
    verticalAlign: 'bottom',
    itemStyle: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14,
      fontWeight: 'normal'
    }
  }
};

data = {
  "StatisticGoalFee": [{
      "Name": "(BOARD)",
      "Value": 900000000.0
    },
    {
      "Name": "(COMPONENT)",
      "Value": 700000000.0
    },
    {
      "Name": "(MODULE)",
      "Value": 770000000.0
    }
  ],
  "StatisticRealFee": [{
      "Name": "(BOARD)",
      "Value": 860000000.0
    },
    {
      "Name": "(COMPONENT)",
      "Value": 460000000.0
    }, {
      "Name": "(MODULE)",
      "Value": 590000000.0
    }
  ],
  "ProgressKRW100Rate": [{
      "Name": "(BOARD)",
      "Value": 0.5
    },
    {
      "Name": "(COMPONENT)",
      "Value": 117.9
    },
    {
      "Name": "(MODULE)",
      "Value": 3.0
    }
  ]
};



let seriesGoal = data.StatisticGoalFee.map(c => ({
  name: c.Name,
  y: c.Value
}));
let seriesReal = data.StatisticRealFee.map(c => ({
  name: c.Name,
  y: c.Value
}));
let rates = data.ProgressKRW100Rate.map(c => ({
  name: c.Name,
  y: c.Value
}));
topRightOption.xAxis.categories = seriesGoal.map(c => c.name);

//this.bottomRightOption.series[1].data = seriesReal;
var top_right = Highcharts.chart('container', topRightOption);
top_right.addSeries({
  name: "도전",
  data: seriesGoal,
  dataLabels: {
    enabled: true,
    padding: 5,
    style: {
      color: ConstantsConfigChart.colorText,
      textOutline: false,
      fontSize: ConstantsConfigChart.fontsize14,
      fontWeight: 'normal'
    },
    align: 'right',
    stackLabels: {
      enabled: true
    },
    formatter: function() {
      return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
    }
  }
});

top_right.addSeries({
  name: "실적",
  data: seriesReal,
  dataLabels: {
    enabled: true,
    padding: 5,
    style: {
      color: ConstantsConfigChart.colorText,
      fontSize: ConstantsConfigChart.fontsize14,
      textOutline: false,
      fontWeight: 'normal',
    },
    align: 'left',
    stackLabels: {
      enabled: true
    },
    formatter: function() {
      return Highcharts.numberFormat(this.y / Constants.OKWON, 1);
    }
  }
});

<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
  <div id="container"></div>
</figure>

Answer 3

由于您设置了class BaseTestCase(TestCase): base_url = '/api/v1' def create_app(self): config = MySqlContainer('mysql:8.0.19') with config as mysql: print(mysql.get_connection_url()) e = sqlalchemy.create_engine(mysql.get_connection_url()) result = e.execute("select version()") for row in result: print("Printing::::::::::::::::::::::" + str(row)) result.close() logging.getLogger('connexion.operation').setLevel('ERROR') connex_app = connexion.App(__name__, specification_dir='../../api/') connex_app.app.json_encoder = JSONEncoder connex_app.add_api('static/openapi.yaml') app = connex_app.app app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False app.config['SQLALCHEMY_DATABASE_URI'] = mysql.get_connection_url() app.config['LOG_LEVEL'] = 'DEBUG' bcrypt.init_app(app) db.init_app(app) ma.init_app(app) print("Finished setting up") return app docs的说法，它可能无法按预期工作

一个像素值，为每个列或条指定固定宽度。 为null时，宽度是根据pointPadding和groupPadding计算的。

因此，如果您未设置宽度，则可能会在某处设置class BaseTestCase(TestCase): base_url = '/api/v1' def create_app(self): class Config: PORT = 5000 SQLALCHEMY_TRACK_MODIFICATIONS = False FLASK_ENV = 'local' SQLALCHEMY_DATABASE_URI = 'sqlite:///:memory:' LOG_LEVEL = 'DEBUG' logging.getLogger('connexion.operation').setLevel('ERROR') connex_app = connexion.App(__name__, specification_dir='../../api/') connex_app.app.json_encoder = JSONEncoder connex_app.add_api('static/openapi.yaml') app = connex_app.app app.config.from_object(Config) bcrypt.init_app(app) db.init_app(app) ma.init_app(app) print("Finished setting up test") return app 和/或pointWidth

pointPadding

groupPadding