【问题标题】:How to fix the width of bar in waterfall chart as well as its x-axis width of one group.?如何固定瀑布图中条形的宽度以及一组的x轴宽度。?
【发布时间】:2019-04-08 09:39:23
【问题描述】:

image

我正在尝试使用 pointWidth 为瀑布图中的条形设置固定宽度,但使用它我无法增加整个条形组的宽度。

我尝试使用 groupPadding 和 pointPadding。没有太大帮助。

以下是我用来在 highcharts 中设置的图表选项。

{
    chart: {
      type: "waterfall"
    },
    title: {
      text: "Grouped Waterfall"
    },
    xAxis: {
      categories:['Commission', 'Client Fee', 'Fee', 'Discount', 'Payaway', 'Revenue'],
      crosshair: true
    },

    yAxis: {
      min: 0,
      title: {
        text: 'GWP'
      }
    },
    plotOptions: {
      waterfall: {
        pointWidth: 20,
      }
    },
    series: [
      {
        name: "Tokyo",
        data: [
          { y: 116440000, w: 20 }, 
          { y: 9390000, w: 20 }, 
          { y: 5410000, w: 20 }, 
          { y: -66880000, w: 20 }, 
          { y: -2270000, w: 20 }, 
          { y: 62090000, isSum: true }
        ]
      },
      {
        name: "New York",
        data: [
          { y: 9390000 }, 
          { y: 116440000 }, 
          {  y: -66880000 }, 
          { y: 5410000 }, 
          { y: -2270000 }, 
          { isSum: true, y: 62090000 }
        ]
      },
      {
        name: "London",
        data: [
          { y: 116440000 }, 
          { y: 9390000 }, 
          { y: 5410000 }, 
          { y: -66880000 }, 
          { y: -2270000 }, 
          { isSum: true, y: 62090000 }
        ]
      },
    ]
  }

【问题讨论】:

  • 嗨@Mayuri Rathod,您能否更准确地描述您想要实现的目标? pointWidth 选项似乎工作正常:jsfiddle.net/BlackLabel/L4oq5gzf
  • @ppotaczek 嗨,我想增加 3 列的宽度,即 commissionClient Fee 的宽度

标签: angular charts highcharts


【解决方案1】:

您可以对单个数据点使用pointWidth 选项:

series: [{
    ...,
    data: [{
        y: 116440000,
        pointWidth: 20
    }, ... ]
}]

现场演示:http://jsfiddle.net/BlackLabel/c0yxh432/

API 参考:https://api.highcharts.com/highcharts/series.column.data.pointWidth

【讨论】:

  • 这会在栏上添加重叠,这是我不想要的。
  • @Mayuri Rathod,请查看此示例:jsfiddle.net/BlackLabel/n2td5u18
  • 我在问题中添加了图片。如果你看一下,那么你将成为佣金下的酒吧和桌子的变化。这里,随着条形数量的增加,条形宽度是恒定的,它们之间的间距是恒定的。并且表格在其下方与特定的长度对齐。但截至目前,我无法完全控制宽度。如果您能帮我解决这个问题陈述,那就太好了
  • 嗨@Mayuri Rathod,所以我知道您希望所有列的宽度都相同?例如,您是否希望这些图表上的所有列都具有相同的宽度 (jsfiddle.net/BlackLabel/eb872k1r)?
  • 嗨@ppotaczek,是的,虽然我也想使用chartOptions控制该宽度
猜你喜欢
  • 2011-04-15
  • 1970-01-01
  • 2020-08-30
  • 1970-01-01
  • 2021-04-02
  • 1970-01-01
  • 1970-01-01
  • 2017-04-30
相关资源
最近更新 更多