2017-10-16 11 views
0

charts.jsを使用してグラフを作成して設定しましたが、今はX軸が時刻を表すようにしたいと思います。次のコードを使用してこれを実行しようとすると、次のコンソールエラーが発生します。Uncaught ReferenceError:瞬間が定義されていません。私はchart.bundle.min.jsを使用しています。ドキュメンテーションにバンドルにはmoment.jsが付属しているので、私もダウンロードしてリンクする必要はありません。Charts.js:瞬間が定義されていません(chart.bundle.min.jsを使用)

ここにコードがありますが、これは時間軸についての質問に回答していたスタックメンバーから得ました。 はJavaScript:

function newDate(days) 
{ 
    return moment().add(days, 'd'); //THIS IS WHERE THE PROBLEM IS ACCORDING TO CONSOLE. 
}; 

var config = 
{ 
    type: 'line', 
    data: 
    { 
    //Calling the function here, so also shows as error in console. 
    labels: [newDate(-4), newDate(-3), newDate(2), newDate(3), newDate(4), newDate(5), newDate(6)], 
    datasets: 
    [{ 
     label: "My First dataset", 
     data: [4, 3, 1, 4], 
    }] 
    }, 
    options: 
    { 
    scales: 
    { 
     xAxes: 
     [{ 
     type: 'time', 
     unit: 'month', 
     }], 
    }, 
    } 
}; 

var ctx = document.getElementById("myChart").getContext("2d"); 
new Chart(ctx, config); 

HTML:

<html> 
    <head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> 
    <link rel="stylesheet" href="css/customFitStyling.css" type="text/css"> 
    <link rel="stylesheet" href="css/w3c_v4.css" type="text/css"> 
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 
    <script type="text/javascript" src="js/chart.bundle.min.js"></script> 
    </head> 
    <body> 

    <canvas id="myChart"></canvas> 
    </body> 
</html> 

答えて

1

これは、いくつかの理由の瞬間のように私には見えます私はJSFiddleにあなたのコードを試してみましたが、バンドルで提供されておらず、エラーが発生し、それは素晴らしい作品serpatleyしかしMoment.jsに負荷です。

おそらくChart.jsとMoment.jsをバンドルではなく使用することがあります。httpリクエストが心配であれば、あなたはいつでもそれらを圧縮してバンドルすることができますか?

+0

私はあなたの更新をお手伝いしようとします! – Brian

+0

あなたは正しいです:moment.jsを別途処理しました。 chart.js githubに問題をオープンする必要がありますか? – Brian

+1

これは参考になるかもしれませんが、バンドルされたバージョンを使うことができますが、ネームスペースなどの後ろにある可能性があります。少なくとも期待どおりに動作していない可能性があります。 – Udders

0

私はcharts.jsのドキュメントを見て:

When providing data for the time scale, Chart.js supports all of the formats that Moment.js accepts. See Moment.js docs for details.

だから、あなたはこのようにChart.js APIを使用する必要があります。

var chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ type: 'time', time: { displayFormats: { quarter: 'MMM YYYY' } } }] } } })

ないmoment().add()

+0

私はもともとこの方法でチャートを作成しましたが、ティックやユニット構成でも、チックを表示したり、データを受け入れたりしませんでした。 – Brian

関連する問題