月份或年份 xaxis 的浮动

Question

我正在尝试调整 flot 生成的图表上 x 轴的外观。这是代码：

$(function () {
var data1 = [[1451599200000,0],[1454277600000,0],[1456783200000,104],[1459458000000,67]];
var data2 = [[1451599200000,48],[1454277600000,48],[1456783200000,53],[1459458000000,37]];

var options = {
      series: {
        bars: {
          show: true,
        }
      },
      xaxis: {
        mode: "time",
        timeformat: "%m-%Y",
      }
      };

var plotObj = $.plot($("#placeholder"), [{
        data: data1,
        label: "Data1",
      }, {
        data: data2,
        label: "Data2",
      }],
      options);
});

这是我得到的结果。

问题 #1：我的数据数组包含 [timestamp,value] 对，我希望 x 轴使用时间戳，在本例中是一个月。每个条只需要一个 x 轴标签。如果使用类别插件会更好，请给我一个如何使用它的示例，我可以修改我的 JSON 数据，以便时间戳是字符串而不是时间戳。

问题 #2：是否可以根据 JSON 中存在的数据点数量来调整条形的宽度？这样它们就不会像我的示例中那样薄。

Link 到 jsfiddle：https://jsfiddle.net/prxbl/ubewvjkr/2/

Answer 1

切换到 x 轴的 "Categories" 是解决方案。首先，您需要包含插件 jquery.flot.categories.min.js，然后调整 json 数据以使用字符串而不是时间戳。示例代码：

$(function () {
var data1 = [["01-2016",0],["02-2016",0],["03-2016",104],["04-2016",67]];
var data2 = [["01-2016",48],["02-2016",48],["03-2016",53],["04-2016",37]];

var options = {
      series: {
        bars: {
          show: true,
          barWidth: 0.6,
                    align: "center"
        }
      },
      xaxis: {
       mode: "categories",
                tickLength: 0
      }
      };

var plotObj = $.plot($("#placeholder"), [{
        data: data1,
        label: "Data1",
      }, {
        data: data2,
        label: "Data2",
      }],
      options);
});

通过设置 align: "center" 选项，您解决了问题 #2，并且您只得到一个标签，居中于栏下方。通过调整 barWidth 属性，您可以更改条形宽度。

Answer 2

你也可以在没有类别插件的情况下使用这些选项来做到这一点，主要是 barWidth 和 tickSize:

    series: {
        bars: {
            show: true,
            barWidth: 15*24*60*60*1000, // 15 days, roughly half a month
            align: 'center'
        }
    },
    xaxis: {
        mode: "time",
        timeformat: "%m-%Y",
        tickSize: [1, 'month']
    }

Updated fiddle

月份或年份 xaxis 的浮动

Flot with months or years xaxis

jquery

charts

flot