chartjs | さゆフィクション http://it.kensan.net aws wordpress などなどゆるーく書いてます Fri, 28 Apr 2023 13:43:01 +0000 ja hourly 1 https://wordpress.org/?v=6.7.1 https://it.kensan.net/wp-content/uploads/2023/03/cropped-icon-32x32.png chartjs | さゆフィクション http://it.kensan.net 32 32 webpackでローカルサーバーを起動して、ソース変更時に変更内容をリアルタイムにブラウザに反映する https://it.kensan.net/yarn-webpack-local.html Sun, 12 Mar 2023 03:26:55 +0000 http://3.113.9.194/it/?p=800
webpackでローカルサーバーを起動して、ソース変更時に変更内容をリアルタイムにブラウザに反映するということをやっていきます！
本記事でやること

webpackでローカルサーバーを起動
ソース変更時に変更内容をリアルタイムにブラウザに反映する

以下の3つを使います。

使うもの

yarn
webpack
chart.js

上記3つを使って、jsでグラフを描画するコードを書いて動作を確認していきます。

yarnとは？webpackとは？という方は以下の記事をご参照ください。

https://it.kensan.net/it/yarn-webpack-chart-js.html
localhost

まずはソースコードの準備から始めていきます！

ソースコードの準備

まずはソースコードの準備をしていきます。

最終的なフォルダ構成

最終的なフォルダ構成は以下の通りです。

├── dist  // index.htmlを格納
├── node_modules  // yarnでインストールしたモジュールが入る
├── package.json  // パッケージを管理
├── src  // 作成するjsファイルを入れるディレクトリ
├── webpack.config.js  // webpackの設定ファイル
└── yarn.lock   // インストールしたパッケージ情報が書かれたファイル

yarn init

まず、yarn initで初期化処理を行い、package.jsonを生成します。

// 実行するコマンド
yarn init

上記コマンドを実行すると、ターミナル上で色々聞かれますが、全てエンターキーを押せばOKです。

chart.jsのインストール

yarnでchart.jsをインストールします。

// 実行するコマンド
yarn add chart.js

HTMLファイルの作成

まず、HTML格納用のディレクトリを作成します。

// 実行するコマンド
mkdir dist

次にdist直下にindex.htmlというファイルを作成します。

index.htmlに記載する内容は以下の通りです。

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Chart.js</title>
</head>
<body>
    <div style="width:50%;">
        <canvas id="myChart" width="400px" height="400px"></canvas>
    </div>
    <script src='main.js'></script>
</body>
</html>

chart.jsのグラフを描画するjavascript

chart.jsのグラフを描画するjavascriptファイルを作成します。

まず、javascript格納用のディレクトリを作成します。

// 実行するコマンド
mkdir src

次にsrc直下にindex.jsというファイルを作成します。

index.jsに記載する内容は以下の通りです。


import Chart from 'chart.js/auto';

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

const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['data1', 'data2', 'data3'],
        datasets: [{
            label: 'chart label',
            data: [1, 2, 3],
        }]
    }
})

webpackでローカルサーバーを起動

webpackインストール

  • webpack-dev-server：インストールするとwebpackで開発サーバーを立ち上げることができるようになる
// 実行するコマンド
yarn add webpack webpack-cli webpack-dev-server --dev

webpack設定

webpackの設定ファイル「webpack.config.js」を作成します。

「webpack.config.js」に記載する内容は以下の通りです。

module.exports = {
  mode: "development",
  devServer: {
    static: "dist",
    open: true
  }
};

ローカルサーバーを起動

以下のコマンドを実行します。

// 実行するコマンド
yarn run webpack-dev-server

以下のようにブラウザでグラグが描画されていることが確認できます。

chartjs

chartjs

ソース変更時に変更内容をリアルタイムにブラウザに反映する

src/index.jsのソースコードを変更します。

6行目のグラフタイプを変更して保存します。

  • 変更前：type: ‘bar’
  • 変更前：type: ‘line’

保存後、自動的にブラウザのリロードが走り、グラフが以下のように線グラフに変更されます。変更内容が自動的にブラウザに反映されることが確認できました！

chartjs-line

chartjs-line

まとめ

実際に動かすことで、webpackの理解が深まったかなと思います。

公式：https://webpack.js.org/concepts/

]]> yarnとwebpackを使ってchart.jsでグラフ描画！！ https://it.kensan.net/yarn-webpack-chart-js.html Sat, 11 Mar 2023 04:46:10 +0000 http://3.113.9.194/it/?p=787 yarn/webpackの環境を作って、動かすことで、yarn/webpackの理解が深めようという記事です。

yarnとwebpackを使ってchart.jsでグラフを書いてみます。

npmを使ったバージョンの記事もありますので、よろしければご参照ください。

https://it.kensan.net/it/npm_chartjs_webpack.html
localhost

yarnやwebpackの理解に役立てばと思います。

まずは用語説明から入っていきます。

用語説明

本記事で扱う3つの用語について説明していきます。

用語説明

yarn
webpack
Chart.js

yarnとは

  • npm(Node Package Manager)と同様、JavaScriptプログラミング言語のパッケージマネージャー
    • npmと一緒に使えます
      • npmと比べて以下のメリットがあります。
        • インストールが速い
        • 厳密にモジュールのバージョンを固定できる
    • パッケージの依存関係を定義するためのファイルとして、「package.json」というファイルが作られる
    • 公式：https://yarnpkg.com/cli/install

yarn利用時の基本的なフォルダ構成

基本的なフォルダ構成は以下のようになります。

├── dist  // ビルドしたファイルが入るディレクトリ
├── index.html   // 今回、chart.jsを表示させる用のHTMLファイル
├── node_modules  // yarnでインストールしたモジュールが入る
├── yarn.lock   // インストールしたパッケージ情報が書かれたファイル
├── package.json  // パッケージを管理
└── src  // ビルド前のjsファイルをを入れるディレクトリ

webpackとは

  • 複数のJavaScriptファイルを一つのファイルにまとめくれます
    • 以下のようなメリットがあります
      • 読み込み順を気にしなくて良い
      • 1回のリクエストで済むため高速

Chart.jsとは

  • グラフ描画できるJavaScriptライブラリ

yarnとwebpackを使ってchart.jsでグラフを書いてみる

yarnのインストール

以下のコマンドでインストールします

// 実行するコマンド
sudo npm install -g yarn

yarn init

まず、yarn initで初期化処理を行い、package.jsonを生成します。

// 実行するコマンド
yarn init

上記コマンドを実行すると、ターミナル上で色々聞かれますが、全てエンターキーを押せばOKです。

webpackのインストール

以下のコマンドでwebpackをインストールします

// 実行するコマンド
yarn add -D webpack webpack-cli

yarnでinstallするときは、installではなくaddと書きます

JavaScriptの自動ビルドを有効化

JavaScriptを変更した場合に自動でビルドするに設定します

// 実行するコマンド
npx webpack --watch

JavaScriptの変更を自動で検知してビルドしてくれるという便利機能。使っときましょ！

chart.jsのインストール

yarnでchart.jsをインストールします。

// 実行するコマンド
yarn add chart.js

chart.jsを表示するHTMLファイルの作成

「index.html」を作成します。

「index.html」の中身は以下参照

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Chart.js</title>
</head>
<body>
    <div style="width:50%;">
        <canvas id="myChart" width="400px" height="400px"></canvas>
    </div>
    <script src='dist/main.js'></script>
</body>
</html>

chart.jsのグラフを描画するjavascript

chart.jsのグラフを描画するjavascriptファイルを作成します。

まず、javascript格納用のディレクトリを作成します。

// 実行するコマンド
mkdir src

次にsrc直下にindex.jsというファイルを作成します。

index.jsに記載する内容は以下の通りです。


import Chart from 'chart.js/auto';

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

const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['data1', 'data2', 'data3'],
        datasets: [{
            label: 'chart label',
            data: [1, 2, 3],
        }]
    }
})

動作確認

index.htmlにアクセスし、chart.jsの画像が表示されればOKです。

以上、yarnとwebpackを使ってchart.jsでグラフ描画でしたー

chartjs

まとめ

npmとほとんど同じですね。yarnとnpmを比べると以下のメリットがあるので、yarnを使っていくほうが良いかと思います！

  • インストールが速い
  • 厳密にモジュールのバージョンを固定できる
]]> npmとwebpackを使ってchart.jsでグラフを書いてみる https://it.kensan.net/npm_chartjs_webpack.html Sat, 11 Mar 2023 04:10:42 +0000 http://3.113.9.194/it/?p=725 npm/webpackの使い方を理解を深めるため、npmとwebpackを使ってchart.jsでグラフを書いてみます。

yarnを使った場合の記事もありますので、yarnを使いたい方は以下の記事をご参照ください。(npmとyarnどちらを使うかで悩んだら、yarnを選択した方が良いです)

https://it.kensan.net/it/yarn-webpack-chart-js.html
localhost

まずは用語説明からです。

用語説明

本記事で扱う3つの用語について説明していきます。

用語説明

npm
webpack
Chart.js

npmとは

  • Node Package Manager の略。
  • JavaScriptプログラミング言語のパッケージマネージャー
  • パッケージの依存関係やパッケージの競合関係を解決してくれる
    • パッケージの依存関係を定義するためのファイルとして、「package.json」というファイルが作られる
  • 公式：https://docs.npmjs.com/

npm利用時の基本的なフォルダ構成

基本的なフォルダ構成は以下のようになります。

├── dist  // ビルドしたファイルが入るディレクトリ
├── index.html   // 今回、chart.jsを表示させる用のHTMLファイル
├── node_modules  // npmでインストールしたモジュールが入る
├── package-lock.json   // インストールしたパッケージ情報が書かれたファイル
├── package.json  // パッケージを管理
└── src  // ビルド前のjsファイルをを入れるディレクトリ

webpackとは

  • 複数のJavaScriptファイルを一つのファイルにまとめくれます
    • 以下のようなメリットがあります
      • 読み込み順を気にしなくて良い
      • 1回のリクエストで済むため高速

Chart.jsとは

  • グラフ描画できるJavaScriptライブラリ

npmとwebpackを使ってchart.jsでグラフを書いてみる

早速グラフを描いていきます。

npm init

まず、npm initで初期化処理を行い、package.jsonを生成します。

// 実行するコマンド
npm init

上記コマンドを実行すると、ターミナル上で色々聞かれますが、全てエンターキーを押せばOKです。

webpackのインストール

以下のコマンドでwebpackをインストールします

// 実行するコマンド
npm install -D webpack webpack-cli

JavaScriptの自動ビルドを有効化

JavaScriptを変更した場合に自動でビルドするに設定します

// 実行するコマンド
npx webpack --watch

chart.jsのインストール

npmでchart.jsをインストールします。

// 実行するコマンド
npm install chart.js

chart.jsを表示するHTMLファイルの作成

「index.html」を作成します。

「index.html」の中身は以下参照

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Chart.js</title>
</head>
<body>
    <div style="width:50%;">
        <canvas id="myChart" width="400px" height="400px"></canvas>
    </div>
    <script src='dist/main.js'></script>
</body>
</html>

chart.jsのグラフを描画するjavascript

chart.jsのグラフを描画するjavascriptファイルを作成します。

まず、javascript格納用のディレクトリを作成します。

// 実行するコマンド
mkdir src

次にsrc直下にindex.jsというファイルを作成します。

index.jsに記載する内容は以下の通りです。


import Chart from 'chart.js/auto';

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

const chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['data1', 'data2', 'data3'],
        datasets: [{
            label: 'chart label',
            data: [1, 2, 3],
        }]
    }
})

動作確認

index.htmlにアクセスし、chart.jsの画像が表示されればOKです。

chartjs

chartjs

まとめ

実際にnpm/webpackの環境を作って、動かすことで、npm/webpackの理解が深まったかなと思います

]]> コピペでできるVuejs × TypeScriptな環境でchartjsでのグラフ描画 https://it.kensan.net/vuejs-x-typescript%e3%81%aa%e7%92%b0%e5%a2%83%e3%81%a7chartjs%e3%82%92%e4%bd%bf%e3%81%86.html Fri, 17 Apr 2020 02:54:00 +0000 https://verdy-it.xyz/itblog/?p=139 Vuejs × TypeScriptな環境でchartjsを使ってグラフを描画してみます。

コピペで実際にグラフ描画まで行けます。

インストールからプログラムの書き方まで記載しています。

完成イメージは以下となります。

chartjs

棒と折れ線の複合グラフを描画していきます。

本記事でやること
  • 棒と折れ線の複合グラフを描画
  • 使うもの
    • Vuejs
    • TypeScript
    • chartjs

 

vueプロジェクトの作成

Vueのインストールとプロジェクトの作成をして、Vueの表示確認まで行います。

やること

Vueのインストール
プロジェクトの作成
Vueの表示確認

vueインストール

まずはvueをインストールします。

npm install -g @vue/cli

vueプロジェクトの作成

次にプロジェクトの作成をします。

vue create chart

「chart」の部分がプロジェクト名です。

vueプロジェクト作成

上記のように表示されます。TypeScript を利用するために 「Manually select features」 を選択します。

vueプロジェクト作成

TypeScriptを選択(上下キーでカーソル移動してスペースで選択)します。

あとはお好みで選択してプロジェクトを作成する

vueプロジェクトの起動

cd <プロジェクト名>
npm run serve

上記コマンド実行後、「http://localhost:8080/」でアクセスできます。

アクセス時すると、以下のような画面が表示されます。

プロジェクト起動

次はchartjsのインストールをします。

vue-chartjsのインストール

次に以下コマンドでchartjsをインストールする

npm install vue-chartjs chart.js
npm install @types/chart.js -D

vueファイルの作成

環境は整ったのでvueファイルを修正・作成していきます！

まずsrcフォルダ内の「App.vue」の修正。「src/App.vue」の記述を全て削除し、以下の通り記載します。

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}
</script>

次に「App.vue」から呼ばれる「src/components/HelloWorld.vue」ファイルを修正します。

「src/components/HelloWorld.vue」の記述を全て削除し、以下の通り記載します。

<template>
  <div class="chart-container">
    <Chart :chartData="chartData" :chartOptions="chartOptions" :chartStyles="chartStyles" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import { ChartData, ChartOptions } from "chart.js";
import Chart from "./Chart.vue";

@Component({ components: { Chart } })
export default class HelloWorld extends Vue {

  // チャートのオプション
   chartOptions: ChartOptions = {
    maintainAspectRatio: false,
    tooltips: {
      mode: 'index'
    },
    scales: {
      yAxes: [
        {
          id: "1",
          position: "left",
        },
        {
          id: "2",
          position: "right"
          
        }
      ]
    }
  };
  // チャートのスタイル: <canvas>のstyle属性として設定
   chartStyles = {
    height: "100%",
    width: "100%"
  };
  // チャートのデータ
   chartData: ChartData = {
    labels: ['ラベル1','ラベル2','ラベル3','ラベル4'],
    datasets: [
      {
        type: "bar",
        label: "説明１",
        data: [1000,2000,1500,1750],
        fill: false,
        lineTension: 0,
        borderColor: "#00008b",
        yAxisID:"1" // Y軸のIDを指定 
      },
      {
        type: "line",
        label: "説明２",
        data: [1,2,5,2],
        fill: false,
        lineTension: 0,
        borderColor: "#ff0000", 
        yAxisID:"2" // Y軸のIDを指定 
      }
    ]
  };

}
</script>

最後に「src/components/HelloWorld.vue」から呼ばれる「src/components/Chart.vue」ファイルを作成します。

このファイルはchartjs描画用コンポーネントで、他のvueからでも、必要な値「chartOptions」「chartStyles」「chartData」を渡してあげればグラフの描画が可能となります。

<script lang="ts">
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import Chart from "chart.js";
import { Line, Bar,mixins } from "vue-chartjs";

@Component({})
export default class LineChartComponent extends Mixins(Line, Bar, mixins.reactiveProp) {
  @Prop()  chartData!: Chart.ChartData;
  @Prop()  chartOptions!: Chart.ChartOptions;

  @Watch('chartData')
  onChartDataChanged() {
    this.load();
  }
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  }
  load() {
    this.renderChart(this.chartData, this.chartOptions);
  }
}
</script>

完成! Vue・TypeScript・chartjsを使用したグラフ

chartjs

まとめ

Vuejs × TypeScriptの環境でchartjsでグラフ描画ができました！

やったこと

環境構築：Vuejs × TypeScript
chartjsで棒と折れ線の複合グラフを描画

]]> chartjsで「Object literal may only specify known properties, and ‘tension’ does not exist in type ‘ChartDataSets’.」がでる時の対処法 https://it.kensan.net/vuejs-x-typescript-x-chartjs%e3%81%a7%e3%80%8cobject-literal-may-only-specify-known-properties-and-tension-does-not-exist-in-type-chartdatasets-%e3%80%8d%e3%81%8c%e3%81%a7%e3%82%8b.html Thu, 16 Apr 2020 00:06:01 +0000 https://verdy-it.xyz/itblog/?p=137 chartjsを扱う際に「Object literal may only specify known properties, and ‘tension’ does not exist in type ‘ChartDataSets’.」というエラーが出た時の解決法を記載します。

エラー発生時のchartjsのバージョンは2系です。

エラーが発生する該当のソースコードは以下となります。

chartData = {
  labels: ['ラベル１','ラベル２','ラベル３'],
    datasets: [
      {
        type: "line",
        label: "ラベル名",
        data: [1,2,3],
        fill: false,
        tension: 0, // ここが誤り
        borderColor: "#00008b",
      }     
    ]
};

「tension」が誤りで以下のように「lineTension」とする必要があるようです。

chartData = {
  labels: ['ラベル１','ラベル２','ラベル３'],
    datasets: [
      {
        type: "line",
        label: "ラベル名",
        data: [1,2,3],
        fill: false,
        lineTension: 0, // ここを修正する
        borderColor: "#00008b",
      }     
    ]
};

以下公式ページを見ると以下のことがわかります。

公式ページからわかること

chartjsのバージョン2系：lineTensionというプロパティ名が正しい
chartjsのバージョン3系：tensionというプロパティ名が正しい
→2系では「lineTension」というプロパティがあったが、3系では無くなり、代わりに「tension」というプロパティが追加されたようです。
→2系では「lineTension」というプロパティを使う必要がある！

 

chartjs2系の公式ページ：

Line · GitBook
www.chartjs.org

chartjs3系の公式ページ：

Line Chart | Chart.js
Open source HTML5 Charts for your website
www.chartjs.org
 ]]>