web-dev-qa-db-ja.com

「String」x軸でプロット

Flotを使用する場合、文字列ベースのx軸が必要です。たとえば、顧客「Bob」、「Chris」、「Joe」のリストがあり、Y軸に収益をプロットしたいと考えています。 （これは棒グラフです）

一見、flotはx軸の数値タイプのみをサポートしているようです。これは本当ですか？

flot
50
Chris Muench

@ Matt は近いですが、ticksオプションを使用して、どの目盛りにどのラベルを付けるかを直接指定する方が合理的です。

var options = {

...
  xaxis: {
    ticks: [[0,'Bob'],[1,'Chris'],[2,'Joe']]
  }
...

};

[〜＃〜] edit [〜＃〜]： this （ラベルよりも多くのデータを追加しましたが、あなたはアイデアを得る）。

84
Ryley

Categoriesプラグイン（jquery.flot.categories.js）はこれを非常にうまく行うため、データは次のようにフォーマットできます。

var data = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];

次のようにプロットします。 enter image description here

参照： http://www.flotcharts.org/flot/examples/categories/index.html

18
ak112358

この質問 に従ってtickFormatterオプションを使用してこれを行うことができるはずです。私は自分で試したことはありませんが、これを試してみましょう。

var xAxisLabels = ['Bob', 'Chris', 'Joe'];    
function xAxisLabelGenerator(x){
    return xAxisLabels[x];
}

var plot = $.plot($("#placeholder"), { 
    // snip other options...
    xaxis: {
       transform: xAxisLabelGenerator,
       tickFormatter: xAxisLabelGenerator 
    }
});

つまり、実際のx値は0, 1, 2, ...

17
Matt Ball