Flot条形图：当只有一个条目时配置x轴的范围？答案

【问题标题】：Flot bar charts: configure extent of x-axis when there's only one entry?Flot条形图：当只有一个条目时配置x轴的范围？
【发布时间】：2015-03-06 02:45:34
【问题描述】：

有人知道如何在只有 1 个条目的浮点条形图中定义 x 轴的长度吗？

given in the Flot documentation 有“最小”和“最大”选项，但它们似乎需要绝对值。

默认情况下，x 轴会自动拉伸以适应条目的值。来自文档：

The options "min"/"max" are the precise minimum/maximum value on the
scale. If you don't specify either of them, a value will automatically
be chosen based on the minimum/maximum data values.

在只有一个条目的图表上，条形图一直延伸到 x 轴的整个范围，这看起来显然是错误的！

见an example of the problem。

【问题讨论】：

你说的是y轴还是x轴？ y 轴大于给定示例中的最大值。即 250 与 216
x 轴 - 抱歉.... 已编辑问题！

标签： jquery flot

【解决方案1】：

您可以使用 AJAX 调用或 jQuery 设置最小值和最大值。将最小值和最大值设置为少一个月和/或多一个月，以避免条形图填满整个图表区域。

【讨论】：

我不完全确定，但这是答案还是评论？
两者兼而有之。您可以使用 AJAX 调用设置最小值和最大值。但是，AP257 似乎没有通过 AJAX 设置他的数据，这将让他通过 jQuery 设置 Min/Max。按要求编辑了我的答案。
如果你这样做，它看起来仍然很糟糕，但我想知道如果你有一个 1200 像素宽的图表和一个数据点，那么理想的行为会是什么......
@Ryley：是的，我理解你的问题。如果是这种情况，您可以使用 jQuery 设置 Flot div 的宽度。

【解决方案2】：

好的，改变策略。当您使用全天数据（显然）而不是连续的“模拟”系列时，我建议您明确说明，例如...

Example here

  var options = {
      xaxis: {
        mode: "time",
        timeformat: "%y-%b",
        minTickSize: [1, "day"], //we are only working to a resolution of 1 day
        autoscaleMargin: 0.02    //autoscaleMargin solves the issue of bars extending the full width
      },
      yaxis: {
        tickFormatter: suffixFormatter
      },
      legend: {
        position: "nw",
      },
      colors: ["#830242"],
      grid: { hoverable: true, clickable: true }
  };
  var data = [
    {
      points: {
        show: true
        },
      lines: {
        show: false,
        fill: 0
        },
      bars: {
        show: true,
        barWidth: 24 * 60 * 60 * 1000    //Force the bar to a day-wide (in milliseconds)
      },
    data: [
      [ new Date('2010-04-08T00:00:00Z'), 216359.0 ]
    ]}
  ];

【讨论】：

@Ryley Cool，很遗憾 AP257 不在这里。也许他们已经猜到了。不能在 SO 上轻推人们！
别担心，@AP257 最终会注意到的，人们不喜欢留下未接受的问题......
@MichelAyres 嗨 - JSFiddle 依赖于可用的 OP 基本 URL，但它不再可用......

【解决方案3】：

这是我的解决方案，对我有用。

            var margin = 0.01; //default

            // If your array has only one value, change the size of margin
            // than, you can have a small column
            if (data.length == 1)
            {
                margin = 3.00;
            }
            
            //Display graph
            $.plot($("#barras"), [ data ] , {
                xaxis: {
                    autoscaleMargin: margin // set the new value
                }

            });

【讨论】：

【解决方案4】：

恐怕我对 flot 不是很熟悉，但咨询API 似乎可以配置条形宽度和对齐方式。想必也可以配置图表的整体宽度。例如，如果你的图表是 500px 宽，设置 bars 如下：

bars: {
  barWidth: 250,
  align: "center",
  horizontal: false
}

应该将单条放置在 x 轴的中间。

【讨论】：

抱歉，不起作用 - 它仍然会拉伸条形以填充整个图表 :(
不，但我在 OPs 页面上对其进行了测试，因为我想看看它是否可以工作......我用 flot 做了一些开发，这可能会出现在我身上......