月または年を指定した小数点xaxis

Question

浮動小数点生成チャートで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：私のデータアレイ[タイムスタンプ、値]のペアが含まれており、私はこの場合には月であるタイムスタンプを使用するx軸たいです。バーごとに1つのx軸ラベルのみが必要です。 Categoriesプラグインを使用する方が良い場合は、使用方法の例を教えてください。タイムスタンプがタイムスタンプではなく文字列になるようにJSONデータを変更できます。

問題2：JSONのデータポイントの数に応じてバーの幅を調整することはできますか？それで私の例ほど薄くないのです。 jsfiddleする

リンク：https://jsfiddle.net/prxbl/ubewvjkr/2/

Answer 1

はx軸のために "カテゴリー" への切り替えはsollutionです。まず、プラグイン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が解決され、バーの中央に1つのラベルが表示されます。 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