東洋経済オンラインの新型コロナウイルス国内感染の状況で使われているチャートのツールを使てみました。

yasu (80)memberin Steem Japan • 3 years ago

こんにちは、@yasuです。

久しぶりに、開発系の記事です。

私の記事に、東洋経済オンラインが提供しているコロナのチャートをよく載せていますが、

今回は、そのチャートツールを私も試してみました。

https://toyokeizai.net/sp/visual/tko/covid19/

Chart.js
https://www.chartjs.org/

Getting Started
https://www.chartjs.org/docs/latest/getting-started/

サンプル
https://ojagggyo.github.io/chart/sample.html

完全なソースを見つけられず、自分なりにコードを書いてみました^^

サンプルのソース

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
      const labels = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
      ];
      const data = {
        labels: labels,
        datasets: [{
          label: 'My First dataset',
          backgroundColor: 'rgb(255, 99, 132)',
          borderColor: 'rgb(255, 99, 132)',
          data: [0, 10, 5, 2, 20, 30, 45],
        }]
      };
      // === include 'setup' then 'config' above ===
      const config = {
      type: 'line',
        data: data,
        options: {}
      };
    </script>
  </head>
  <body>
    <div>
      <canvas id="myChart"></canvas>
    </div>
    <script>
      var myChart = new Chart(
        document.getElementById('myChart'),
        config
      );
    </script>
  </body>
</html>

#japanese #jp #zzan #marlians #aaa