JavaScriptで「データを可視化」何を使う？ 10種類のライブラリを比較：提供ツールや付加機能、短所、導入／使用方法を解説
CoderPadはJavaScriptでよく使われる10種類のデータ可視化ライブラリを紹介した。ApexCharやChart.js、D3.jsなどを扱う。
この記事は会員限定です。会員登録（無料）すると全てご覧いただけます。
コーディング面接に使われるWebサービスなどを手掛けるCoderPadは2022年8月23日（米国時間）、「JavaScript」でよく使われる10種類のデータ可視化ライブラリを紹介した。
データをビジュアルでグラフィカルなフォーマットに合わせて表示するデータ可視化は、データを分かりやすく、効率的に伝える上で効果的だ。
紹介されている10種類のライブラリは次の通り。
・ApexChart
・Chart.js
・D3.js
・Techan.js
・AnyChart
・Taucharts
・Zoomcharts
・Canvasjs
・Highcharts
・TOAST UI Chart
CoderPadはそれぞれについて、提供する可視化ツールの種類や付加機能、短所、導入／使用方法を説明し、コードサンプルを提供している。どのライブラリがベストなのかは、アプリケーションに加え、想定しているユースケースとの統合のしやすさによって決まるという。
ApexChart
「ApexChart」はオープンソースのグラフライブラリであり、限られたコードで美しくインタラクティブなグラフを作成できる。折れ線や棒、面、円、ローソク足、ヒートマップなど、16種類のグラフをサポートしている。
ApexChartのグラフはレスポンシブでインタラクティブであり、カスタマイズされたアイコンを使って自動的にレンダリングされる。グラフのズームやデータセットのパン、PNGファイルやSVGファイル、CSVファイルとしてレンダリングされたグラフのエクスポートが可能だ。さらに、選択したデータを読み込む動的グラフも作成できる。10種類以上のテーマパレットでグラフのスタイルを指定することも可能だ。
ただし、ApexChartのライブラリはかなりサイズが大きく、現在のバージョン（v3.35.4）では約496KBだ。そのため、大きなデータセットを扱う場合、パフォーマンスに問題が生じる。
- 使用方法
次のように、ApexChartのCDN（Content Delivery Network）リンクをプロジェクトのマークアップに含めることができる。
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
npmを使って次のコマンドでインストールすることもできる。
npm install apexcharts
インストールが完了したら、グラフのスタイルとデータセットを指定したオプションオブジェクトを作成することで、グラフのレンダリングを開始する。ランダムなデータセットを使った面グラフの例を次に示す。
<head>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<script>
var options = {
chart: {
height: 280,
type: "area",
},
dataLabels: {
enabled: false,
},
series: [
{
name: "Series 1",
data: [75, 82, 68, 75],
},
],
fill: {
type: "gradient",
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.9,
stops: [0, 90, 100],
},
},
xaxis: {
categories: ["01 Jan", "02 Jan", "03 Jan", "04 Jan"],
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
Chart.js
「Chart.js」はJavaScriptのデータ可視化ライブラリで最も使われているものの一つだ。GitHubでは、これらのライブラリとしては「D3.js」に次いでスター数が多い。
Chart.jsが提供するシンプルでクリーン、魅力的なグラフは、アプリケーションに素早く取り込むことが可能だ。
Chart.jsの利点はアプリケーションへの統合が非常に簡単なことだ。散布図や折れ線、棒、円、ドーナツ、バブル、面、レーダー、ミックスの9種類のグラフをサポートしており、これらは全て、既定値としてレスポンシブであり、アクセシブルだ。さらに、カスタマイズ可能なラベルや凡例、ホバーポップアップ、シリーズトグルも統合されている。
Chart.jsの短所の一つは、既定値では鈍い灰色で表示されることだ。そのために、大きなデータセットを扱うときに、異なる色で異なるグラフパーツのスタイルを設定することが難しくなる。さらに、ズームやパンのような基本的なグラフ機能をサポートするために、特別な労力が必要になる。
- 使用方法
Chart.jsはnpmでインストールできる。
npm install chart.js
または次のように、スクリプトのCDNリンクをマークアップに含めればよい。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
Chart.jsの使い方は、ApexChartとほぼ同じだ。グラフを作成するには、Chartオブジェクトの新しいインスタンスを作成し、そのパラメーターとして、グラフのターゲットやデータセット、追加のオプションを追加する必要がある。Chart.jsで作成した簡単な棒グラフの例を次に示す。
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
</head>
<body>
<div class="container">
<div id="chart">
<canvas id="myChart" style="height: 60vh"></canvas>
</div>
</div>
</body>
<script>
const ctx = document.getElementById("myChart");
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["Red", "Blue", "Green"],
datasets: [
{
label: "# Ratings",
data: [8, 19, 12],
backgroundColor: ["#f44336", "#3f51b5", "#009688"],
borderWidth: 2,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
responsive: false,
},
});
</script>
D3.js
D3.jsはWebアプリケーションに動的でインタラクティブな可視化機能を追加するためのJavaScriptライブラリだ。JavaScriptのデータ可視化ライブラリで最も利用されているものの一つであり、GitHubでは現在、これらのライブラリとしては最も多くのスターが付いている。最初のバージョンは2011年にリリースされており、歴史も長い。
ApexChartやChart.jsなどでは、1つの関数を呼び出すことでグラフを描画できるが、D3.jsはこうしたグラフ機能を直接提供しない。データ可視化機能を構築するためのビルディングブロックといえる。
そのため、D3.jsで簡単なグラフをすぐに作成することは難しい。D3.jsの関数やモジュールの仕組みを理解する必要があるからだ。次の例のように、このライブラリ自体で基本的なグラフを作成するには、かなり長いコードが必要になる。だが、「React」や「Vue.js」といった他のJavaScriptライブラリとの統合のおかげで、D3.jsはかなり使いやすくなっている。
- 使用方法
D3.jsを使い始めるには、CDNリンク（グローバルd3オブジェクトをエクスポートする）をマークアップに含める。
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
また、「npm install d3」コマンドでD3を「Node.js」プロジェクトにインストールできる。ECMAScript 6（ES6、ECMAScript 2015）のインポートを使用することもできる。
<script type="module"> import * as d3 from "https://cdn.skypack.dev/d3@7"; </script>
D3.jsで簡単な折れ線グラフを作成した例を次に示す。
<script src="https://d3js.org/d3.v4.js"></script>
<div id="my_dataviz"></div>
<script>
var margin = { top: 10, right: 30, bottom: 30, left: 60 },
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3
.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv(
"https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/3_TwoNumOrdered_comma.csv",
function (d) {
return { date: d3.timeParse("%Y-%m-%d")(d.date), value: d.value };
},
function (data) {
var x = d3
.scaleTime()
.domain(
d3.extent(data, function (d) {
return d.date;
})
)
.range([0, width]);
svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
var y = d3
.scaleLinear()
.domain([
0,
d3.max(data, function (d) {
return +d.value;
}),
])
.range([height, 0]);
svg.append("g").call(d3.axisLeft(y));
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr(
"d",
d3
.line()
.x(function (d) {
return x(d.date);
})
.y(function (d) {
return y(d.value);
})
);
}
);
</script>
このコードでは、まずSVG（Scalable Vector Graphics）要素を作成し、リモートAPIからグラフデータセットをロードし、D3.jsを使ってSVG要素内のさまざまなパスにデータを追加する必要があることを理解できる。
なお、「D3.js Graph Gallery」サイトには、D3.jsを使って作成された既成のグラフのコレクションが収められている。
Techan.js
「Techan.js」はD3.jsの上に構築されたグラフライブラリだ。アプリケーションにインタラクティブな金融グラフを追加できる。ローソク足やOHLC（Open High Low Close chart）、指標、テクニカル分析といった株価チャートを追加でき、特に金融アプリケーションに有用だ。
このライブラリは今も立派に機能を果たし、盛んに利用されているが、もう6年以上更新されていない。活発にレビューされているライブラリを好むユーザーからすると、これは懸念すべきことかもしれない。Techan.jsのもう一つの短所は、ライブラリの仕組みを理解するために、D3.jsの仕組みに関する予備知識が必要であることだ。
- 使用方法
Techan.jsをWebアプリケーションで使い始めるには、D3.jsのCDNリンクとともに、Techan.jsスクリプトのCDNリンクを含める必要がある。
<script src="https://d3js.org/d3.v4.min.js"></script> <script src="http://techanjs.org/techan.min.js"></script>
TechanとD3.jsで簡単なローソク足チャートを作成した例を次に示す。
<style>
path.candle {
stroke: #000000;
}
path.candle.body {
stroke-width: 0;
}
path.candle.up {
fill: #00aa00;
stroke: #00aa00;
}
path.candle.down {
fill: #ff0000;
stroke: #ff0000;
}
</style>
<body>
<button>Update</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://techanjs.org/techan.min.js"></script>
<script>
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.timeParse("%d-%b-%y");
var x = techan.scale.financetime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var candlestick = techan.plot.candlestick().xScale(x).yScale(y);
var xAxis = d3.axisBottom().scale(x);
var yAxis = d3.axisLeft().scale(y);
var svg = d3
.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function (error, data) {
var accessor = candlestick.accessor();
data = data
.slice(0, 200)
.map(function (d) {
return {
date: parseDate(d.Date),
open: +d.Open,
high: +d.High,
low: +d.Low,
close: +d.Close,
volume: +d.Volume,
};
})
.sort(function (a, b) {
return d3.ascending(accessor.d(a), accessor.d(b));
});
svg.append("g").attr("class", "candlestick");
svg
.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")");
svg
.append("g")
.attr("class", "y axis")
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
// Data to display initially
draw(data.slice(0, data.length - 20));
// Only want this button to be active if the data has loaded
d3.select("button")
.on("click", function () {
draw(data);
})
.style("display", "inline");
});
function draw(data) {
x.domain(data.map(candlestick.accessor().d));
y.domain(techan.scale.plot.ohlc(data, candlestick.accessor()).domain());
svg.selectAll("g.candlestick").datum(data).call(candlestick);
svg.selectAll("g.x.axis").call(xAxis);
svg.selectAll("g.y.axis").call(yAxis);
}
</script>
</body>
この例は、Techan.jsギャラリーから再作成されたものだ。このギャラリーには、Techan.jsライブラリがサポートするさまざまな金融グラフのコード例も含まれている。
AnyChart
「AnyChart」は基本的なグラフ（棒や円、その他）や株価チャート、PERT（Program Evaluation and Review Technique）グラフなど、さまざまなグラフを提供するグラフ作成ライブラリだ。
AnyChartでは、描画ツールを株式チャートに統合することもできる。これは金融アプリケーションで非常に便利だ。また、AnyChartが提供するグラフのローカライズ機能は、194以上の定義済みロケールをサポートする。
ただし、AnyChartはオープンソースであり、非営利目的での使用は無料だが、商用アプリケーションで使用する場合は、ライセンスを購入する必要がある。
- 使用方法
AnyChartはさまざまな言語やライブラリ、フレームワークとの統合が可能だ。ここではReactプラグインについて扱う。
AnyChartは、次のコマンドでインストール後、Reactアプリケーションに追加できる。
npm install anychart-react
インストール後、そのコンポーネントをインポートして、次のようなシンプルな棒グラフをレンダリングできる。
import AnyChart from "anychart-react/dist/anychart-react";
function App() {
return (
<div>
<h1>Hello</h1>
<AnyChart type="bar" data={[3, 6, 2, 7, 9]} title="Simple bar chart" />
</div>
);
}
export default App;
Taucharts
「Taucharts」はD3.js上に構築されたオープンソースのグラフライブラリだ。主にデータの探索と分析に使用される。だが、Techan.jsとは異なり、Tauchartsを実装する上でD3.jsに関する予備知識は必要ない。
Tauchartsは優れたフレームワークを持ち、多くの拡張オプションがある。Tauchartsのプラグインインフラは適応性が高く、これを用いてプラグインを素早く作成できる。
- 使用方法
従来のHTMLプロジェクトでは次のように、D3.js、Tauchart.js、TauchartsのCSSファイルを含める必要がある。
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css"
/>
<!-- .. -->
<script src="https://cdn.jsdelivr.net/d3js/latest/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js"></script>
</head>
npmを使って次のコマンドでインストールすることもできる。
npm install taucharts
インストールが完了したら、Tauchartsオブジェクトの新しいインスタンスを作成し、パラメーターとして、データセット／データソース、グラフタイプ、グラフのスタイルを指定するための追加オプションを含めることで、アプリケーションへの統合を開始できる。
Tauchartsでシンプルな折れ線グラフを作成した例を次に示す。
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css"
/>
<!-- .. -->
<script src="https://cdn.jsdelivr.net/d3js/latest/d3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js"></script>
</head>
<body>
<div id="line"></div>
<script>
var datasource = [
{
type: "us",
count: 0,
date: "12-2013",
},
{
type: "us",
count: 10,
date: "01-2014",
},
{
type: "us",
count: 15,
date: "02-2014",
},
{
type: "us",
count: 12,
date: "03-2014",
},
{
type: "us",
count: 16,
date: "04-2014",
},
{
type: "us",
count: 13,
date: "05-2014",
},
{
type: "bug",
count: 21,
date: "01-2014",
},
{
type: "bug",
count: 19,
date: "02-2014",
},
{
type: "bug",
count: 23,
date: "03-2014",
},
{
type: "bug",
count: 26,
date: "04-2014",
},
{
type: "bug",
count: 23,
date: "05-2014",
},
];
var chart = new Taucharts.Chart({
data: datasource,
type: "line",
x: "date",
y: "count",
color: "type",
});
chart.renderTo(document.getElementById("line"));
</script>
</body>
</html>
Zoomcharts
「Zoomcharts」では、すぐに使えるグラフライブラリを用いて、最小限の入力と開発時間でアプリケーションにインタラクティブなデータ可視化機能を追加できる。Zoomchartsはネットワークグラフやマトリックスグラフ、ファセットグラフ、タイムグラフ、ジオマップグラフなど、さまざまなグラフをサポートしている。
Zoomchartsを非本番環境で利用する際は無料で利用できるものの、アプリケーションを本番環境に移行する場合は、ライセンスを購入してAPIキーを取得する必要がある。さもないと、Webブラウザのコンソールにエラーが表示される。
- 使用方法
ZoomchartsをWebプロジェクトに追加するにはCDNリンクを用いる。
<script src="https://cdn.zoomcharts-cloud.com/1/stable/zoomcharts.js"></script>
レンダリングしようとするグラフの種類にもよるが、Zoomchartsでは、数行のコードでかなり簡単にデータを可視化できる。タイムグラフの作成例を次に示す。
var t = new TimeChart({
container: document.getElementById("demo"),
data:
{
units:["h"],
url: "https://zoomcharts.com/dvsl/data/time-chart/temperature-kuldiga-h.json"
}
});
Canvasjs
「Canvasjs」は高パフォーマンスで見栄えの良いグラフを作成できる軽量ライブラリを提供する。カスタマイズ可能なグラフの選択肢が、30種類以上用意されている。Canvasjsの株価チャートは多くの場合、他の株価チャートライブラリ（Techan.jsなど）と比較して、より直感的でインタラクティブだ。また、ReactやVue.s、「Angular」などの主要JavaScriptフレームワークや、Java、Javaの「Spring Framework」、PHPとの統合が可能だ。
さらに、CanvasjsはAnyChartのように、グラフのローカライズもサポートしており、グラフ要素をさまざまな言語でレンダリングできる。
Canvasjsは開発用途では無料だが、開発バージョンでは全てのグラフにウオーターマークが追加される。本番環境で使用するには、ライセンスを取得する必要がある。
- 使用方法
Canvasjsの圧縮ライブラリをダウンロードして解凍すると、「canvasjs.min.js」ファイルが含まれているので、これをWebサイトにリンクする。また、次のように、CDNリンクをマークアップに直接含めることもできる。
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
バブルグラフの作成例を次に示す。
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Comparison among Countries on Fertility Rate Vs Life Expectancy in 2009",
},
axisX: {
title: "Life Expectancy",
maximum: 85,
},
axisY: {
title: "Fertility Rate",
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "left",
},
data: [
{
type: "bubble",
legendText: "Size of Bubble Represents Population",
showInLegend: true,
legendMarkerType: "circle",
toolTipContent:
"<strong>{name}</strong> <br/> Fertility Rate: {y}<br/> Life Expectancy: {x} yrs<br/> Population: {z} mn",
dataPoints: [
{ x: 78.1, y: 2.0, z: 306.77, name: "US" },
{ x: 68.5, y: 2.15, z: 237.414, name: "Indonesia" },
{ x: 72.5, y: 1.86, z: 193.24, name: "Brazil" },
{ x: 76.5, y: 2.36, z: 112.24, name: "Mexico" },
{ x: 50.9, y: 5.56, z: 154.48, name: "Nigeria" },
{ x: 68.6, y: 1.54, z: 141.91, name: "Russia" },
{ x: 82.9, y: 1.37, z: 127.55, name: "Japan" },
{ x: 79.8, y: 1.36, z: 81.9, name: "Australia" },
{ x: 72.7, y: 2.78, z: 79.71, name: "Egypt" },
{ x: 80.1, y: 1.94, z: 61.81, name: "UK" },
{ x: 55.8, y: 4.76, z: 39.24, name: "Kenya" },
{ x: 81.5, y: 1.93, z: 21.95, name: "Australia" },
{ x: 68.1, y: 4.77, z: 31.09, name: "Iraq" },
{ x: 47.9, y: 6.42, z: 33.42, name: "Afghanistan" },
{ x: 50.3, y: 5.58, z: 18.55, name: "Angola" },
],
},
],
});
chart.render();
};
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%"></div>
</body>
</html>
Highcharts
「Highcharts」はインタラクティブなグラフ作成機能を提供するデータ可視化ソリューションだ。ここで紹介している他のライブラリと比べて、より多くの既成グラフタイプに対応しているようだ。
Highchartsは多くのユニークな機能を提供する。グラフをさまざまなテーマオプションと統合したり、3Dグラフを作成したり、グラフをさまざまなフォーマットでエクスポートしたり、レンダリングしたグラフをデータテーブルに随時変換したりできる。さらにグラフ要素に説明を追加することで、スクリーンリーダーにとってアクセシブルなグラフを作成できる点が優れている。
Highchartsは非商用の個人利用では無料だが、商用アプリケーションに統合するには、ライセンスの購入が必要になる。
- 使用方法
HighchartsはスクリプトのCDNリンクをアプリケーションに追加することで、簡単に利用可能だ。
<script src="https://code.highcharts.com/highcharts.js"></script>
使用したい追加のプラグインによっては、それらを別途インポートする必要がある。このライブラリでは、少ないコードで高水準のグラフを作成できる。
世界の人口密度を地図上に視覚化する例を次に示す。
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<div id="container"></div>
<script>
(async () => {
const mapData = await fetch(
"https://code.highcharts.com/mapdata/custom/world.topo.json"
).then((response) => response.json());
const data = await fetch(
"https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population-density.json"
).then((response) => response.json());
// Initialize the chart
Highcharts.mapChart("container", {
title: {
text: "Predefined zoomed area",
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: "bottom",
},
},
mapView: {
projection: {
name: "WebMercator",
},
center: [10, 58],
zoom: 2.8,
},
colorAxis: {
min: 1,
max: 1000,
type: "logarithmic",
},
legend: {
title: {
text: "Population density per km2",
},
},
series: [
{
data,
mapData,
joinBy: ["iso-a2", "code"],
name: "Population density",
states: {
hover: {
color: "#a4edba",
},
},
tooltip: {
valueSuffix: "/km2",
},
},
],
});
})();
</script>
TOAST UI Chart
「TOAST UI Chart」はオープンソースのグラフソリューションだ。TOAST UI自体は完全なグラフライブラリではなく、「Bootstrap」に似たUI（User Interface）コンポーネントを提供するJavaScriptライブラリといえる。だが、グラフをサポートするUIライブラリは珍しいため、取り上げた。
TOAST UI Chartの特徴は、軽量であること、豊富な種類のグラフに対応できること、JavaScriptコンポーネントで簡単にグラフを統合できることだ。
- 使用方法
TOAST UI Chartは、次のようにしてプロジェクトにインストールする。
npm install --save @toast-ui/chart
または、次のようにCDNをロードする。
<link rel="stylesheet" href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css" /> <script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>
TOAST UI Chartで作成したインタラクティブなライブ更新グラフの例を次に示す。
<link
rel="stylesheet"
href="https://uicdn.toast.com/chart/latest/toastui-chart.min.css"
/>
<script src="https://uicdn.toast.com/chart/latest/toastui-chart.min.js"></script>
<div id="chart-area"></div>
<script>
const el = document.getElementById("chart-area");
const data = {
categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
series: [
{
name: "A",
data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
},
{
name: "B",
data: [60, 40, 10, 33, 70, 90, 100, 17, 40, 80],
},
],
};
const options = {
chart: { title: "LiveUpdate", width: 900, height: 400 },
xAxis: { pointOnColumn: false, title: { text: "X Title" } },
yAxis: { title: "Y Title" },
series: { shift: true },
};
const chart = toastui.Chart.areaChart({ el, data, options });
let index = 11;
const intervalId = setInterval(() => {
const random = Math.round(Math.random() * 100);
const random2 = Math.round(Math.random() * 100);
chart.addData([random, random2], index.toString());
index += 1;
if (index === 30) {
clearInterval(intervalId);
}
}, 1500);
</script>
関連記事
JavaScript関連プロジェクトのランキング「2020 JavaScript Rising Stars」が公開
「Best of JavaScript」プロジェクトは、2020年に最も注目を集めたJavaScriptプロジェクトなどのランキング「2020 JavaScript Rising Stars」を発表した。総合ランキングでは、過去5年間首位を維持した「Vue.js」を抜いて、「Deno」が首位を獲得した。
「State of JavaScript 2020」が公開、関連技術の動向が分かる
JavaScriptの利用動向に関する年次調査「State of JavaScript 2020」が発表された。世界137カ国のJavaScriptユーザー2万3765人の回答が集計、分析されている。JavaScript関連技術を7つに分け、それぞれの評価も分析した。「webpack」「Express」「React」「TypeScript」「Jest」といった技術に勢いがあることが分かったという。
「JavaScriptアプリ開発入門」電子書籍版
最近のWeb開発では、どのような技術を使い、どのようにアプリが開発されているのだろう。JavaScriptの言語仕様と人気のライブラリについての最新事情をキャッチアップして、これからの時代に備えよう。
関連リンク
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。