web-dev-qa-db-ja.com

モーライズチャートでxkeyに文字列を使用する

モーリスチャートを使用して、曜日ごとに車両番号を表示する折れ線グラフを作成しようとしています。

問題はxKeyでStringを使用すると、結果が次のように表示されることです。 enter image description here

しかし、それらを数字に置き換えた場合、問題なく動作します。

これが私のコードです。

<div class="col-xs-6">
  <label>Transports Traffic</label>
  <div id="traffic_chart">
    <script>
      new Morris.Area({
        element: 'traffic_chart',
          data: [
            {y: 'Sat', a: 100, b: 90, c:22},
            {y: 'Sun', a: 75, b: 65, c:22},
            {y: 'Mon', a: 50, b: 40, c:22},
            {y: 'Tue', a: 75, b: 65, c:22},
            {y: 'Wed', a: 50, b: 40, c:22},
            {y: 'Thi', a: 75, b: 65, c:22},
            {y: 'Fri', a: 100, b: 90, c:22}
          ],
          xkey: 'y',
          ykeys: ['a', 'b', 'c'],
          labels: ['Cars', 'Bikes', 'Trucks']
       });
     </script>
  </div>
</div>
javascriptchartsmorris.js
19
hasan.alkhatib

Morriseライブラリでは、Xキーは常に日付/時刻値に解析されます。したがって、それを防ぎ、Xキーで文字列値を使用するには、この属性を追加する必要があります。

parseTime: false

私がそれを追加した後にそれは働いた。

ソース 。

43
Hasan Alkhatib

これも機能する私の例です。

$(function() {
    Morris.Area({
        element: 'morris-area-chart-days',
        data: [{
            day: 'Mon',
            a: 95
        }, {
            day: 'Tue',
            a: 66
        }, {
            day: 'Wed',
            a: 86
        }, {
            day: 'Thu',
            a: 151
        }, {
            day: 'Fri',
            a: 115
        }, {
            day: 'Sat',
            a: 93
        }, {
            day: 'Sun',
            a: 38
        }],
        xkey: 'day',
        ykeys: ['a'],
        parseTime: false,
        labels: ['Messages'],
        pointSize: 2,
        hideHover: 'auto',
        resize: true
    });
});
4
vr_driver

Morrischartでは、 'parseTime'がfalseに設定されている場合、X値の時間/日付解析をスキップします。それ以外の場合は、等間隔のシリーズとして扱います。デフォルト値はparseTime：trueです。このため、上記のグラフで問題が発生します..以下のコード行を挿入してください

parseTime：false

以下のようにコードを書き換え、

new Morris.Area({
             ------
             parseTime:false,
             ------
});
3
CelinVeronicca

これを使って...

parseTime：false、

 Morris.Line({
        element: 'morris-line-chart',
        data:  <?php echo json_encode($emparray);?>,
        xkey: 'xco',
        ykeys: ['x1', 'x2'],
        labels: ['x1', 'x2'],
        hideHover: 'auto',
        pointSize: 3,
        parseTime: false,
        resize: true
    });
2
Brammy Welang