Chart.js - scaleType = 'date' not working

Chart.jsを使用して、私はDATEを表示するためにx軸（とツールチップ）を取得しようとしていますが、xで表示される大きな整数軸ラベル。私はドキュメンテーションの例が何をしているのかを比較しました。私はそれが何をしているのか分かりません。誰でも助けてくれますか？Chart.js - scaleType = 'date' not working

私が作った小さな例は、うまくいかないことを示しています。（ところで - 側の問題として、赤色の線の色が赤ではなく、赤いつづられている場合、行は正常に見えますが、そのライン上もはや作業をツールチップないことに注意してください） https://plnkr.co/edit/CKUf4zFC1vhe3VNUF5Lf?p=preview

javascript for the above plunker example is below 
---------------------------------------------------- 
<!DOCTYPE html> 
<html> 
<head> 
</head> 

<body> 
    <div> 
    <canvas id="canvas"></canvas> 

    <script> 
     var chartData = { 
     datasets: [{ 
      borderColor: 'Red', 
      label: 'Capital R in borderColor, tooltips dont work', 
      data: [{ 
      x: new Date('2011-04-11T11:45:00'), 
      y: 25 
      }, { 
      x: new Date('2011-04-11T12:51:00'), 
      y: 28 
      }, { 
      x: new Date('2011-04-11T14:10:00'), 
      y: 22 
      }, { 
      x: new Date('2011-04-11T15:15:00'), 
      y: 18 
      }] 
     }, { 
      borderColor: 'green', 
      label: 'borderColor all lower case, tooltips now work', 
      data: [{ 
      x: new Date('2011-04-11T11:45:00'), 
      y: 15 
      }, { 
      x: new Date('2011-04-11T12:51:00'), 
      y: 18 
      }, { 
      x: new Date('2011-04-11T14:10:00'), 
      y: 12 
      }, { 
      x: new Date('2011-04-11T15:15:00'), 
      y: 8 
      }] 
     }, ] 
     }; 


     window.onload = function() { 

     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myScatterxx = Chart.Scatter(ctx, { 
      data: chartData, 
      scaleType: 'date', 
      options: { title: { display: true, text: "scaleType='date' isn't working", fontSize:36} }, 
     }); 
     }; 
    </script> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"> 
    </script> 

</body> 
</html>

出典

2016-10-03 user2191367

の初ドキュメンテーションが面倒なので、タイムスケールチャートを作成する方法を知りませんでした。実際の呼び出しは次のようである：

window.myScatterxx = Chart.Scatter(ctx, { 
    data: chartData, 
    options: { 
     title: { 
      display: true, 
      text: "it is now working", 
      fontSize: 36 
     }, 
     scales: { 
      xAxes: [{ 
       // This is the important part 
       type: "time", 
      }] 
     } 
    }, 
});

今、あなたはあなたにも正しいライブラリをインポートする必要があると思い、正しい構文を持っています。あなたが与えたコードで見ることができるように、 Chart.min.jsをインポートしましたが、time要素を使って作業することが分かっているので、さらに多くのコードが必要です。

次のいずれかを実行できます

インポートMoment.js（CDN link）、その後Chart.min.js。
インポートChart.bundle.min.jsには、モーメントライブラリとチャートライブラリの両方が含まれています。

最後に、私はまた、あなたのコードに気づいたあなたは赤のデータセットのためのツールチップを表示する問題を抱えていました。その色は Redと定義されています。 redにそれを変更し、ツールチップが再び動作します：

datasets: [{ 
    borderColor: 'red', 
    label: 'Capital R in borderColor, tooltips now work', 
    data: [ 
     // ... 
    ] 
}]

あなたは、これらすべての修正がin this jsFiddleを生きて見ると、ここで最終的な結果であることができます、そんなにTekiv

出典

2016-10-04 08:12:39 tektiv

ありがとう！ – user2191367

時間のない日付部分だけを表示するようにツールチップをカスタマイズするにはどうすればよいですか、後ほど質問します。実際のアプリケーションでは、日付のみが重要です。 btw - 赤と赤の比較私は色のすべての小文字がツールチップを動作させることを理解しました。しかし、色「赤」が線の色を赤にしているが、ツールチップを破っている点で矛盾しています。内部的には、.toLowerCase（）呼び出しを追加して色を比較すると、より寛大になります。もう一度、多くの感謝！ – user2191367

@ user2191367喜び！ - ツールヒントの編集については、[ツールチップのコールバックに関するドキュメント]（http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration）をチェックしてください（*「ツールチップのコールバック」まで少しスクロールしてください* ）。また、この[その他のフィドル]（https://jsfiddle.net/oe1r8kbw/1/）に何をする必要があるかについてのアイデアをチェックしてください。 – tektiv

Chart.js - scaleType = 'date' not working

答えて

関連する問題