How to render this bar chart with flot

问题

Can you render a bar chart like this using flot?

Do I need to create the dataset manually to get this result, instead of using mode: 'time' ?

回答1:

Actually pretty easy to produce using flot.

var options = {
     series: {
         bars: {
             show: true,
             barWidth: 15778463000, // 1/2 year in milliseconds
             align: 'center'
         },
     },
     yaxes: {
         min: 0
     },
     xaxis: {
         mode: 'time',
         timeformat: "%y",
         tickSize: [1, "year"],
         autoscaleMargin: .10 // allow space left and right
     }
 };

 $(function() {
     $.plot($('#placeholder'), [[[1230768000*1000, 100], //[seconds * 1000 = milli, y value]
                                [1262304000*1000, 200],
                                [1293840000*1000, 300]]], options);
 });

Produces:

来源：https://stackoverflow.com/questions/8079519/how-to-render-this-bar-chart-with-flot