ホームページ >ウェブフロントエンド >jsチュートリアル >非常に美しい無料の純粋な JavaScript グラフ作成ライブラリ

非常に美しい無料の純粋な JavaScript グラフ作成ライブラリ

高洛峰
高洛峰オリジナル
2016-11-26 16:25:281425ブラウズ

ハイチャートとは何ですか?

Highcharts は純粋な JavaScript で書かれたチャート ライブラリで、Web サイトや Web アプリケーションにインタラクティブなチャートを簡単かつ便利に追加でき、個人の研究、個人の Web サイト、および非営利使用には無料です。 HighCharts で現在サポートされているグラフの種類には、曲線グラフ、面グラフ、棒グラフ、円グラフ、散布図、および総合グラフが含まれます。

非常に美しい無料の純粋な JavaScript グラフ作成ライブラリ

HighCharts は JavaScript で書かれているため、Flash や Java のようにプラグインを必要とせず、高速に動作します。さらに、HighCharts は互換性が高く、現在のほとんどのブラウザを完全にサポートできます。現在の最新の正式バージョンは HighCharts2.3.5 です。

機能

優れた互換性: iPhone、iPad、さらには Internet Explorer 6 を含むすべての最新のブラウザでうまく動作します。標準ブラウザはグラフィック描画に SVG を使用しますが、従来の Internet Explorer は描画に VML を使用します。

非営利ユーザーは完全に無料: 個人の Web サイト、学校の Web サイト、または非営利団体のいずれで Highcharts を使用する場合でも、許可は必要ありません。

オープンソース: Highcharts の無料版を使用しているか商用ライセンス版を使用しているかに関係なく、ソース コードをダウンロードして独自の変更を加えることができるため、ユーザーは大きな自由を得ることができます。

純粋な JavaScript: Highcharts は完全にネイティブ ブラウザー テクノロジーに基づいており、Flash や Java などのクライアント側のプラグインに依存する必要はありません。さらに、PHP や ASP.NET などをサーバーにインストールする必要はありません。 Highcharts に必要なコア ファイルは 2 つだけです。highcharts.js コア ファイルと、Web ページですでに使用されている jQuery、MooTools、または Prototype フレームワークのいずれか 1 つです。

多数のグラフ タイプ: Highcharts は、折れ線グラフ、曲線グラフ、面グラフ、面曲線グラフ、棒グラフ、円グラフ、散布図などの一般的なグラフ タイプをサポートしており、それらを 1 つのグラフに組み合わせることができます。

シンプルな構成構文: Highcharts の構成にはプログラミングのスキルは必要ありません。構成変数には単純な JavaScript オブジェクトのみが必要です。

動的: グラフの作成後いつでも、完全な API を通じて系列やデータ ポイントを追加、削除、変更したり、軸を変更したりできます。多くのイベントはプログラミング チャート用のフックを提供し、jQuery、MooTools、または Prototype フレームワークの AJAX API と組み合わせて、サーバー データをリアルタイムで動的に表示できるソリューションも提供します。

複数の軸: 場合によっては、気温、降水量、気圧など、さまざまな指標のデータを比較する必要があります。Highcharts では、データ セットごとに異なる Y 軸を設定でき、さまざまなカテゴリのデータを比較することができます。別の X 軸を設定することも可能です。各軸はチャートの上下左右のどこにでも配置でき、反転、スタイル、位置などのすべてのオプションを個別に設定できます。

ヒント ラベル: チャート上の任意の点または系列でマウスが停止すると、関連情報を含むツールバー ヒントが表示されます。また、マウスがチャート上で移動すると、処理のためにマウスに最も近い点が自動的に選択されます。表示: チャート データを表示するのに非常に便利です。

タイムライン: チャートの 75% にタイムラインが含まれています。

エクスポートと印刷: エクスポート モジュールが有効になっている場合、ユーザーはエクスポート ボタンをクリックしてグラフを PNG、JPG、PDF、または SVG 形式にエクスポートするか、直接印刷できます。

ズーム: グラフの関心のある部分をズームして詳しく見ることができます。ズームは、X 軸、Y 軸、または両方の軸に同時に適用できます。

外部データの読み込み: Highcharts データは JavaScript 配列から取得されるため、データはローカル構成オブジェクト、別個のファイル、または別の Web サイトから定義できます。さらに、データを配列に解析するコールバック関数だけを使用して、データを任意の形式で Highcharts に渡すことができます。

角度メーター: ダッシュボードと角度メーターの場合、Highcharts はデータを一目で確認できる速度計のようなグラフを提供します。

極座標チャート: 簡単なオプションを使用して、デカルト チャートを極座標チャートまたは放射状チャートに変換できます。

チャートを反転または反転する: X 軸が垂直になるようにチャートを反転する必要がある場合があります。これもサポートされています。

ラベルの回転: 軸ラベル、データポイントラベル、軸タイトルラベルを含むすべてのテキストラベルは、任意の角度で回転できます。

メソッドの呼び出し

var chart = new Highcharts.Chart({

チャート: {…} グローバル: { …}

: {…}

lang: {…}

凡例: {…}

ローディング: {…}

ナビゲーション: {…}

ペイン: {…}

planoptions: {…}

シリーズ: [{…}]

サブタイトル: {…}

タイトル: {…}

ツールチップ: {…}

x軸: {…}

y軸: {…}

});


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