barwidth选项不适用于jquery flot

时间:2014-08-18 15:00:50

标签: javascript jquery flot

我正在尝试用条形图绘制折线图。一切顺利。 这是我的代码

 $.plot(holder, [
                    { data: data[0].data, lines: { show: true }, label:"Service Level" },
                    { data: data[1].data, bars: { show: true }, yaxis: 2, label:"# Of Calls" } // set second series to use second axis
               ], {
                   yaxes: [{
                       min: 0, // options for first axis,
                       max: 100,
                       tickFormatter: function (val, axis) {
                           return val + '%';
                       }
                   }, {
                       alignTicksWithAxis: 1, // options for second axis, put it on right
                       position: "right"
                   }],
                   xaxis: {
                       min: minVal.getTime(),
                       max: maxVal.getTime(),
                       mode: "time",
                       timeformat: timeFormat,
                       //twelveHourClock: true,
                       tickSize: [tickVal, modeChart],
                       //monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                       tickLength: 0
                   },
                   bars: {
                        barWidth: 24 * 60 * 60,
                   },
                   grid: {
                       hoverable: true,
                       clickable: false,
                       borderWidth: 0
                   },
               });
           }

我已经设置了barWidth,无论我改变什么值,条形的宽度都没有改变。你能帮帮我吗?

我说的是这张照片中的蓝色照片

enter image description here

2 个答案:

答案 0 :(得分:2)

由于x轴是时间,因此单位是毫秒。通过指定条形宽度24*60*60,您将宽度设置为一天的1/1000,或约1.5分钟。对于跨越几个月的图表,1.5分钟很小,可能不是您想要的。如果您希望条形宽度为一天,则应指定条形宽度24*60*60*1000

答案 1 :(得分:1)

barWidthseries option,您可以全局或按系列指定:

全局:

...
series: { // you are missing this
    bars: {
        barWidth: 24 * 60 * 60,
    },
}
...

每系列:

{ data: data[1].data, bars: { show: true, barWidth: 24 * 60 * 60 }, yaxis: 2, label:"# Of Calls" } // set second series to use second axis