Xaxes中的Chartsjs時間

所以我一直試圖在我的圖表中的Xaxes中生成時間點。我找到了一些不同種類的例子，但沒有一個能夠工作。 Chartsjs的文檔對我來說有點模糊。那麼我如何在我的xaxes中插入生成的時間？Xaxes中的Chartsjs時間

$j(function(){ 
new Chart(document.getElementById("Combo"), 
    {"type":"bar", 
    "data":{ 
    "labels":["08:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00"], 
    "datasets":[{"label":"Bar Dataset", 
    "data":[11,58,23,44,19,87,65,11,58,23,44,19,87,65], 
    "borderColor":"rgb(255, 99, 132)", 
    "backgroundColor":"rgba(255, 99, 132, 0.2)"}, 

    {"label":"Line Dataset", 
    "data":[11,58,23,44,19,87,65,11,58,23,44,19,87,65 
    ], 
    "type":"line", 
    "fill":false, 
    "borderColor":"rgb(54, 162, 235)"}]}, 

    "options":{ 
    "scales":{ 
    "xAxes":[{ 
    time:{ 
    unit:"hour"} 
    }], 
    xAxes: [{ 
    type: 'time', 
    time: { 
    format: "HH:mm", 
    unit: 'hour', 
    unitStepSize: 1, 
    displayFormats: { 
     'hour': 'HH', 

    }, 
}], 
    "yAxes":[{ 
    "ticks":{"beginAtZero":true} 
    }] 
    } 
    } 
    }); 
});

來源

2017-09-14 Henrik Engdahl

您應該使用parser屬性，而不是format（不建議使用）解析日期。除此之外，您還有其他幾個需要修復的語法問題。

這裏是你的代碼的修訂版：

$(function() { 
 
    new Chart(document.getElementById("Combo"), { 
 
     "type": "bar", 
 
     "data": { 
 
     "labels": ["08:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00"], 
 
     "datasets": [{ 
 
      "label": "Bar Dataset", 
 
      "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65], 
 
      "borderColor": "rgb(255, 99, 132)", 
 
      "backgroundColor": "rgba(255, 99, 132, 0.2)" 
 
     }, { 
 
      "label": "Line Dataset", 
 
      "data": [11, 58, 23, 44, 19, 87, 65, 11, 58, 23, 44, 19, 87, 65], 
 
      "type": "line", 
 
      "fill": false, 
 
      "borderColor": "rgb(54, 162, 235)" 
 
     }] 
 
     }, 
 
     "options": { 
 
     "scales": { 
 
      "xAxes": [{ 
 
       type: 'time', 
 
       time: { 
 
        parser: "HH:mm", //<- use 'parser' 
 
        unit: 'hour', 
 
        unitStepSize: 1, 
 
        displayFormats: { 
 
        'hour': 'HH', 
 
        } 
 
       } 
 
      }], 
 
      "yAxes": [{ 
 
       "ticks": { 
 
        "beginAtZero": true 
 
       } 
 
      }] 
 
     } 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script> 
 
<canvas id="Combo"></canvas>

來源

2017-09-14 13:45:21

嘿，不好意思的回答遲到 - 有工作的早期，感謝您的快速回答，但！它似乎沒有解決我的問題。控制檯上說出乎意料的}，所以沒有太多的繼續。你所說的語法問題是我猜的$ j的東西。 $是我們自定義的jquery分母。 so tldr;沒有仍然沒有得到它的工作。由於我嘗試了你的代碼，所以沒有嘗試過。 –

除了'$ j' *（不那麼重要）*之外，您還有其他語法問題，這是您的代碼無法正常工作的主要原因。請徹底檢查您的代碼，並確保您沒有錯過任何括號或逗號 –

Xaxes中的Chartsjs時間

回答

相關問題