ホームページ ウェブフロントエンド jsチュートリアル Highcharts を使用して温度計グラフを作成する方法

Highcharts を使用して温度計グラフを作成する方法

Dec 18, 2023 pm 05:53 PM
チャート highcharts 温度計

Highcharts を使用して温度計グラフを作成する方法

Highcharts は、温度計グラフなどのさまざまなアイコンの作成に使用できる、人気のある JavaScript グラフ作成ライブラリです。この記事では、Highcharts を使用して単純な温度計グラフを作成する方法を紹介し、具体的なコード例を示します。

  1. 準備作業

まず、Highcharts 公式 Web サイト (https://www.highcharts.com/download) から Highcharts ライブラリをダウンロードし、関連情報を Web ページの JavaScript および CSS ファイルに組み込みます。

  1. HTML 要素の作成

次に、温度計チャートを保持するための div 要素を HTML ファイルに作成します。

  1. 温度計チャートを構成する

温度計グラフを作成するには、Highcharts にいくつかのデータと構成オプションを提供する必要があります。簡単な例を次に示します。

var options = {

chart: {

renderTo: 'container',

type: 'gauge',

plotBackgroundColor: null,

plotBackgroundImage: null,

plotBorderWidth: 0,

plotShadow: false

},

title: {

text: '温度'

},

pane: {

startAngle: -150,

endAngle: 150,

background: [
{
backgroundColor: {

            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFF'],
                [1, '#333']
            ]
        },
        borderWidth: 0,
        outerRadius: '109%'
    },
    {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#333'],
                [1, '#FFF']
            ]
        },
        borderWidth: 1,
        outerRadius: '107%'
    },
    {
        // default background
    },
    {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
    }
]
ログイン後にコピー

},

// 値 axis
yAxis: {

min: -20,
max: 40,

minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',

tickInterval: 10,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 12,
tickColor: '#666',
labels: {
    step: 2,
    rotation: 'auto'
},
title: {
    text: '°C'
},
plotBands: [{
    from: -20,
    to: 0,
    color: '#9CCC65' // green
}, {
    from: 0,
    to: 10,
    color: '#FFEB3B' // yellow
}, {
    from: 10,
    to: 20,
    color: '#FFC107' // orange
}, {
    from: 20,
    to: 30,
    color: '#FF5722' // red
}, {
    from: 30,
    to: 40,
    color: '#F44336' // dark red
}]
ログイン後にコピー

},

series: [{

name: 'Temperature',
data: [20],
tooltip: {
    valueSuffix: ' °C'
}
ログイン後にコピー

}]

};

最も重要なのはペインです。内側と外側の背景色、境界線の幅などのスタイルが変更されました。このうち、plotBands は温度間隔の色を定義します。次の y 軸は温度計のスケールとその他のスタイルを定義し、温度計の初期値が系列に設定されます。

  1. 温度計チャートのレンダリング

最後に、Highcharts の chart() 関数とオプション オブジェクトを呼び出して、温度計チャートをレンダリングします。

var chart =新しいハイチャート。チャート(オプション);

完全なコード:

以上がHighcharts を使用して温度計グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Googleスプレッドシートの凡例にラベルを追加する方法 Googleスプレッドシートの凡例にラベルを追加する方法 Feb 19, 2024 am 11:03 AM

この記事では、Google スプレッドシートの凡例に、名前や ID を提供する 1 つの事柄に焦点を当てたラベルを追加する方法を説明します。凡例はシステムまたは物事のグループを説明し、関連するコンテキスト情報を提供します。 GoogleSheet の凡例にラベルを追加する方法 グラフを操作するときに、グラフを理解しやすくしたい場合があります。これは、適切なラベルと凡例を追加することで実現できます。次に、Google スプレッドシートの凡例にラベルを追加してデータをわかりやすくする方法を説明します。チャートを作成します。 凡例ラベルのテキストを編集します。 始めましょう。 1] グラフを作成する 凡例にラベルを付けるには、まずグラフを作成する必要があります。 まず、GoogleSheets の列または行に入力します。

ハイチャートで動的データを使用してリアルタイム データを表示する方法 ハイチャートで動的データを使用してリアルタイム データを表示する方法 Dec 17, 2023 pm 06:57 PM

ハイチャートで動的データを使用してリアルタイム データを表示する方法 ビッグ データ時代の到来により、リアルタイム データの表示がますます重要になってきました。 Highcharts は人気のあるグラフ作成ライブラリとして、豊富な機能とカスタマイズ性を提供し、リアルタイム データを柔軟に表示できます。この記事では、ハイチャートで動的データを使用してリアルタイム データを表示する方法と、具体的なコード例を紹介します。まず、リアルタイム データを提供できるデータ ソースを準備する必要があります。この記事では、私は

サンキー チャートを使用してハイチャートにデータを表示する方法 サンキー チャートを使用してハイチャートにデータを表示する方法 Dec 17, 2023 pm 04:41 PM

サンキー ダイアグラムを使用してハイチャートにデータを表示する方法 サンキー ダイアグラム (SankeyDiagram) は、フロー、エネルギー、資金などの複雑なプロセスを視覚化するために使用されるチャート タイプです。さまざまなノード間の関係とフローを明確に表示できるため、データの理解と分析が容易になります。この記事では、Highcharts を使用して Sankey チャートを作成およびカスタマイズする方法を、具体的なコード例とともに紹介します。まず、Highcharts ライブラリと Sank をロードする必要があります。

PHP 配列を使用してチャートや統計グラフを生成および表示する方法 PHP 配列を使用してチャートや統計グラフを生成および表示する方法 Jul 15, 2023 pm 12:24 PM

PHP 配列を使用してチャートや統計グラフを生成および表示する方法 PHP は、強力なデータ処理機能とグラフィック生成機能を備えた、広く使用されているサーバーサイド スクリプト言語です。 Web 開発では、データのグラフや統計グラフを表示する必要がよくありますが、PHP 配列を使用すると、これらの機能を簡単に実装できます。この記事では、PHP 配列を使用してチャートや統計グラフを生成および表示する方法を紹介し、関連するコード例を示します。必要なライブラリ ファイルとスタイル シートの導入 開始する前に、いくつかの必要なライブラリ ファイルを PHP ファイルに導入する必要があります

積み上げチャートを使用してハイチャートにデータを表示する方法 積み上げチャートを使用してハイチャートにデータを表示する方法 Dec 18, 2023 pm 05:56 PM

積み上げチャートを使用してハイチャートにデータを表示する方法 積み上げチャートはデータを視覚化する一般的な方法で、複数のデータ系列の合計を同時に表示し、各データ系列の寄与を棒グラフの形式で表示できます。 Highcharts は、さまざまなデータ視覚化のニーズを満たすための豊富な種類のグラフと柔軟な構成オプションを提供する強力な JavaScript ライブラリです。この記事では、Highcharts を使用して積み上げグラフを作成し、提供する方法を紹介します。

Vue フレームワークで統計グラフ システムを迅速に構築する方法 Vue フレームワークで統計グラフ システムを迅速に構築する方法 Aug 21, 2023 pm 05:48 PM

Vue フレームワークで統計グラフ システムを迅速に構築する方法 最新の Web アプリケーションでは、統計グラフは不可欠なコンポーネントです。人気のあるフロントエンド フレームワークとして、Vue.js は、統計グラフ システムを迅速に構築するのに役立つ便利なツールとコンポーネントを多数提供します。この記事では、Vue フレームワークといくつかのプラグインを使用して、簡単な統計グラフ システムを構築する方法を紹介します。まず、Vue スキャフォールディングといくつかの関連プラグインのインストールなど、Vue.js 開発環境を準備する必要があります。コマンドラインで次のコマンドを実行します

ハイチャートを使用してガント チャートを作成する方法 ハイチャートを使用してガント チャートを作成する方法 Dec 17, 2023 pm 07:23 PM

Highcharts を使用してガント チャートを作成する方法には、特定のコード サンプルが必要です。はじめに: ガント チャートは、プロジェクトの進捗状況や時間管理を表示するためによく使用されるチャート形式です。タスクの開始時刻、終了時刻、進捗状況を視覚的に表示できます。 Highcharts は、豊富なチャート タイプと柔軟な構成オプションを提供する強力な JavaScript チャート ライブラリです。この記事では、Highcharts を使用してガント チャートを作成する方法と具体的なコード例を紹介します。 1. ハイチャート

Vue 統計グラフでの線形グラフ関数と円グラフ関数の実装 Vue 統計グラフでの線形グラフ関数と円グラフ関数の実装 Aug 19, 2023 pm 06:13 PM

Vue 統計グラフの線形グラフおよび円グラフ機能は、データ分析および視覚化の分野で実装されており、統計グラフは非常に一般的に使用されるツールです。人気の JavaScript フレームワークである Vue は、統計グラフの表示や対話など、さまざまな機能を実装するための便利なメソッドを提供します。この記事では、Vue を使用して線形グラフ関数と円グラフ関数を実装する方法を紹介し、対応するコード例を示します。線グラフ関数の実装 線グラフは、データの傾向や変化を表示するために使用されるグラフの一種です。 Vue では、いくつかの優れた機能を使用できます。

See all articles