highcharts

chart visualization ui-component

Highchartsは純粋なJavaScriptで書かれたチャートライブラリで、ウェブサイトやウェブアプリケーションにインタラクティブなチャートを簡単に追加する方法を提供します。Highchartsは現在、ライン、スプライン、エリア、エリアスプライン、カラム、バー、パイ、散布図のチャートタイプをサポートしています。商用利用は無料ではありません。

Latest Ver 12.2.0
Homepage
Github
0
12,231
📢 Highchartsは様々なチャートタイプをサポートするJavaScriptのチャートライブラリです。商用利用にはライセンスが必要です。
License: CC-BY-NC-3.0
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/A11yI18n.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/A11yI18n.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Accessibility.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Accessibility.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/AccessibilityComponent.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/AccessibilityComponent.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/AnnotationsA11y.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/AnnotationsA11y.min.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/ContainerComponent.js
https://cdnjs.cloudflare.com/ajax/libs/highcharts/12.2.0/es-modules/Accessibility/Components/ContainerComponent.min.js

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。
📄 HTML
<div id='container' style='width:100%; height:400px;'>
</div>

🧩 External JS
<script src="https://code.highcharts.com/highcharts.js"></script>

⚙️ JavaScript
document.addEventListener('DOMContentLoaded', function () {
  var myChart = Highcharts.chart('container', {
    chart: {
      type: 'bar'
    },
    title: {
      text: 'Fruit Consumption'
    },
    xAxis: {
      categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
      title: {
        text: 'Fruit eaten'
      }
    },
    series: [{
      name: 'Jane',
      data: [1, 0, 4]
    }, {
      name: 'John',
      data: [5, 7, 3]
    }]
  });
});
⚡ Top Tools for Developers
Text Compare

テキスト比較

2つのテキストの違いを一目で確認できます。

Favicon Generator

Faviconジェネレーター

簡単かつ迅速にファビコンを生成します。

Lorem Ipsum Generator

Lorem Ipsumジェネレーター

デザイン用のダミーテキストを生成します。

Character Counter

文字数カウント

文字数と単語数をリアルタイムで確認できます。

SRT ↔ SMI

SRT ↔ SMI変換ツール

字幕形式を簡単に変換できます。

Text Extract(OCR)

画像テキスト抽出

画像内のテキストを自動で抽出します。