jQuery を使用して簡単なグラフ効果を実現する方法

jQuery は、ほとんどの Web 開発者が DOM 操作やイベント処理を処理するために使用することに慣れている、非常に人気のある JavaScript ライブラリです。

さらに、非常に強力な関数図機能も備えています。

この記事では、jQuery を使用して簡単なグラフ効果を実現する方法を説明します。

1. 基本的な HTML コードを作成する

jQuery コードを書き始める前に、まず基本的な HTML コードを作成する必要があります。

まず、グラフを表示するための div 要素を含む HTML ページを作成する必要があります。

<title>jQuery图表功能实现</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div id="chart"></div>

ここでは、jQuery ライブラリと Chart.js ライブラリを紹介します。

次に、グラフを作成するための jQuery コードを記述します。

2. 縦棒グラフの作成

最初に縦棒グラフを作成します。ランダムなデータを生成し、縦棒グラフで表示します。

縦棒グラフを作成するには、表示するラベルとデータを含むオブジェクトを定義する必要があります。

var data = {

labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
    {
        label: 'My First Dataset',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
        hoverBackgroundColor: 'rgba(255, 99, 132, 0.4)',
        hoverBorderColor: 'rgba(255, 99, 132, 1)',
        data: [random(), random(), random(), random(), random(), random(), random()]
    }
]

};

ここでは、random() 関数を使用して、データ ポイントごとにランダムな値を生成します。

次に、jQuery セレクターを使用して、グラフを含む div 要素を選択し、その中に Canvas 要素を作成します。

var ctx = $('#chart');
ctx.append('');

最後にでは、Chart.js ライブラリを使用して縦棒グラフを作成します。

new Chart($('#barChart'), {

type: 'bar',
data: data,
options: {
    responsive: true,
    legend: {
        position: 'top',
    },
    title: {
        display: true,
        text: 'Bar Chart'
    }
}

});

ここでは、type 属性を使用してチャートのタイプ (縦棒形状図) を指定します。 。

3. 折れ線グラフを作成します

次に、折れ線グラフを作成します。縦棒グラフと同様に、ランダムなデータを生成し、折れ線グラフで表示します。

var data = {

labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
    {
        label: 'My Second Dataset',
        fill: false,
        lineTension: 0.1,
        backgroundColor: 'rgba(75,192,192,0.4)',
        borderColor: 'rgba(75,192,192,1)',
        borderCapStyle: 'butt',
        borderDash: [],
        borderDashOffset: 0.0,
        borderJoinStyle: 'miter',
        pointBorderColor: 'rgba(75,192,192,1)',
        pointBackgroundColor: '#fff',
        pointBorderWidth: 1,
        pointHoverRadius: 5,
        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
        pointHoverBorderColor: 'rgba(220,220,220,1)',
        pointHoverBorderWidth: 2,
        pointRadius: 1,
        pointHitRadius: 10,
        data: [random(), random(), random(), random(), random(), random(), random()]
    }
]

};

ここでは、別のrandom()関数を使用して、各データポイントのランダムな値を生成します。

次に、同じ方法を使用して Canvas 要素を作成し、グラフを含む div 要素を選択します。

var ctx = $('#chart');
ctx.append('');

最後にでは、Chart.js ライブラリを使用して折れ線グラフを作成します。

new Chart($('#lineChart'), {

type: 'line',
data: data,
options: {
    responsive: true,
    legend: {
        position: 'top',
    },
    title: {
        display: true,
        text: 'Line Chart'
    }
}

});

ここでは、type 属性を使用してチャートのタイプ (ポリライン画像) を指定します。

結論

この記事では、jQuery と Chart.js ライブラリを使用して縦棒グラフと折れ線グラフを作成し、HTML ページに表示することに成功しました。

これらの例は、jQuery のグラフ作成機能の氷山の一角にすぎません。 jQuery と Chart.js ライブラリを使用すると、円グラフ、レーダー チャートなど、さまざまな種類のグラフを作成できます。

次の記事でさらに詳しく見ていきましょう!

以上がjQuery を使用して簡単なグラフ効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。