chart.js 4.2で時系列のグラフを書く（日付を扱うアダプタを指定必要）

投稿日:2023年2月5日作成者: まつもと

chart.js 4系で、ポンと動くサンプルがWEB上に無かったので上げておきます。
chart.jsがバンドル版じゃない場合に、日付を扱うアダプタをちゃんと入れておかないと動かないサンプルプログラムが多いようです。（そんなの当たり前だろう、という事なのかもしれませんが、chart.js2系はmoment　がデフォルトで入っているからポンと動くでの違いとして。）

日付のアダプタは下記から選べます。

https://github.com/chartjs/awesome#adapters

上記ページからリンクしたらgithubページに各アダプタのCDNのURLがあります。
moment　が推奨されてないという情報が増えているので、サンプルプログラムでは、date-fnsにしています。
（アダプタ使わずに Dataオブジェクト指定、フォーマットは自前でやるなど、javascriptネイティブで動作させる、という方法もありそうですが、、詳細調査未。）

※ソースは、とりあえず動く適当なものです。

<<span class='wp_keywordlink'><a href="https://blog.cybercube.co.jp/category/html%E3%83%BBcss" title="html">html</a></span>>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
<!-- アダプタ -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
</head>
<body>
<!-- グラフ描画エリア -->
<canvas id="myChart" ></canvas>
<!-- 以下、スクリプト -->
<script>

var ctx = document.getElementById('myChart');

    var values =[
        {x:"2020-02-01",y:100},
       {x:"2020-02-02",y:200},
       {x:"2020-02-03",y:300},
       {x:"2020-02-4",y:400},
       {x:"2020-02-07",y:200},
       {x:"2020-02-14",y:600}
];

    var dlg_goods_detail_chart1 = new Chart(ctx, {
        type: "line",
        data: {
          datasets: [{
            label: "値1",
            fill: false,
            borderColor: 'rgba(0, 0, 255, 0.5)',
            lineTension: 0.1,   //曲線にする度合
            data: values,
          }],
        },
        options: {
          spanGaps: true,   //点をつなげる場合
          scales: {
            x: {
              type: 'time',
              time:{
                unit: 'week',    //週に線
                displayFormats: {
                    week: 'yyyy-MM-dd'
                }
              },

            }
          }
        }
      });

</script>
</body>
</<span class='wp_keywordlink'><a href="https://blog.cybercube.co.jp/category/html%E3%83%BBcss" title="html">html</a></span>>

<html>

<head>

</head>

<body>

var ctx = document.getElementById('myChart');

var values =[

{x:"2020-02-01",y:100},

{x:"2020-02-02",y:200},

{x:"2020-02-03",y:300},

{x:"2020-02-4",y:400},

{x:"2020-02-07",y:200},

{x:"2020-02-14",y:600}

];

var dlg_goods_detail_chart1 = new Chart(ctx, {

type: "line",

data: {

datasets: [{

label: "値1",

fill: false,

borderColor: 'rgba(0, 0, 255, 0.5)',

lineTension: 0.1, //曲線にする度合

data: values,

}],

options: {

spanGaps: true, //点をつなげる場合

scales: {

x: {

type: 'time',

time:{

unit: 'week', //週に線

displayFormats: {

week: 'yyyy-MM-dd'

}

});

</script>

</body>

</html>

GoogleMapのMarkerClustererのアイコンが表示されなくなったら

投稿日:2016年6月14日作成者: まつもと

いつの間にかGoogleが公開しているクラスターマップ用の画像が無くなっているようです。
GitHub（https://github.com/googlemaps/js-marker-clusterer）からソースを落として、自サーバーに配置して、MakerClustererのオプションでパスを指定したら解決します。(相対パス指定する場合は、jsファイルからのパスではなく、表示するWEBページからの相対パスになりますので注意です。最後に「/m」を付ける必要があります。）

                var mcOptions = {
                        gridSize: 50,
                        maxZoom: 15,
                        imagePath: '../images/js-marker-clusterer/m'
                };
                // markerclusterを表示
                var markerCluster = new MarkerClusterer( gmap, m_mcs, mcOptions );

var mcOptions = {

gridSize: 50,

maxZoom: 15,

imagePath: '../images/js-marker-clusterer/m'

};

// markerclusterを表示

var markerCluster = new MarkerClusterer( gmap, m_mcs, mcOptions );

jqueryプラグイン「DateTimePicker」で土日の色変更

投稿日:2015年1月19日作成者: まつもと

CSS3対応で日曜日始まりの設定が前提ですが、曜日の見出し欄を装飾する方法。

ちなみに日付欄は曜日番号ごとのclass、xdsoft_day_of_week0（日曜日）　~　6（土曜日）が固定で割り当てられているのでそれをセレクタに指定すれば、開始曜日の設定を変更しても大丈夫そう。
※dayOfWeekStart:1　月曜始まり
dayOfWeekStart:0（default）　日曜始まり

.xdsoft_calendar thead tr th:nth-of-type(1){
    color:#ff6666;
}

.xdsoft_calendar thead tr th:nth-of-type(7){
    color:#6666ff;
}

.xdsoft_calendar thead tr th:nth-of-type(1){

color:#ff6666;

}

.xdsoft_calendar thead tr th:nth-of-type(7){

color:#6666ff;

}

公式サイトはこちら

http://xdsoft.net/jqplugins/datetimepicker/

js エラー「識別子、文字列または数がありません」

投稿日:2013年9月20日作成者: hiratsuka

ボタンをクリックされたら ajax を使用してデータを取得し、

php 側でテーブル等のタグを全部生成して返し

javascript では返ってきたデータを jquery の html メソッドで

表示する、というプログラムを作っていた。

掲題のエラーは jquery.js 内の

elem.innerHTML = value;

の箇所で発生していた。

調べた所、掲題のエラーは IE6 や IE7 で

var hoge = { arg1, arg2, };

のようにarg2 の後ろに余分なカンマが

ある場合に起きるエラー、とのことだった。

今回のエラーとの関連は余りなさそうだ。

PG を調べた所、php でテーブルタグを生成するのに

ヒアドキュメントを使用していた。

$data = <<<DATA

<table>

</table>

DATA;

のような感じ。

ループの中でタグにid を振るときに

ヒアドキュメントの中で

for($i = 0; $i < count($data); $i++){

$ret_data = <<<DATA

～～中略～～

のように括弧を駆使していたが、

どうやらこれがエラーの素だったようだ。

ここの所を

として

$data = sprintf($data, ($i + 1));

のようにsprintf() で置換するように修正することでエラーが発生しなくなった。

へぇ～。

jQueryのdataTablesでチェックボックスの一括ON/OFF

投稿日:2013年8月6日作成者: まつもと

下記のような通常のjQueryの処理方法では、dataTablesの内部データは変更されず、フィルタや改ページで非表示状態の行は処理されません。

$(‘#list input[type=”checkbox”]’).prop(‘checked’,false );

下記の方法ならdataTablesの内部データも変更され、非表示行もきちんと処理されます。

list = $(‘#list’).dataTable({・・・});

list.$(‘.chk_sel’).prop(‘checked’,false );

以上です。

サイバーキューブ開発メモ

ホームページ作成・システム開発メモ。

カテゴリーアーカイブ: javascript

chart.js 4.2で時系列のグラフを書く（日付を扱うアダプタを指定必要）

GoogleMapのMarkerClustererのアイコンが表示されなくなったら

jqueryプラグイン「DateTimePicker」で土日の色変更

js エラー「識別子、文字列または数がありません」

jQueryのdataTablesでチェックボックスの一括ON/OFF

関連記事:

関連記事:

関連記事:

関連記事:

関連記事: