Question

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

FormData formData= new FormData();
data.append("image", $("#image-input").prop("files")[0]);

$.ajax({..., data: formData, ...});

这是我的结果。

问题＃1：我的数据数组包含[timestamp，value]对，我希望x轴使用时间戳，在这种情况下是一个月。每个条仅需要一个x轴标签。如果最好使用Categories插件，请给我一个如何使用它的示例，我可以修改我的JSON数据，以便时间戳是一个字符串而不是时间戳。

问题2：是否有可能根据我的JSON中存在多少数据点来调整条的宽度？所以它们不像我的例子那么薄。

链接到jsfiddle：https://jsfiddle.net/prxbl/ubewvjkr/2/

Answer 1

通过使用这些选项，您也可以不使用类别插件，主要是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

Answer 2

切换到x轴的“类别”是溶剂。首先，您需要包含插件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);
});

通过设置对齐：“中心”选项，您可以解决问题＃2，并且您只获得一个标签，位于条形下方。通过使用barWidth属性，您可以更改条宽。

用数月或数年xaxis绘制

2 个答案: