仮想通貨のチャート作成

CryptoCurrency

CoinCheckのAPIは現在価格しか教えてくれないので、CoinGeckoのAPIを使います

3軸（BTC　ETH　XRP　の過去1ヶ月のチャート）

・const url = のdays=30を365にしたりすることで期間を変更できます

・${coinId}の部分にbitcoinやethereum、rippleといった文字列が入ります

<?php get_header(); ?>
<main>

<canvas id="cryptoChart" width="600" height="300"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  async function fetchCoinData(coinId) {
    const url = `https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=jpy&days=30`;
    const res = await fetch(url);
    const data = await res.json();
    return data.prices;
  }

  async function drawChart() {
    const [btcPrices, ethPrices, xrpPrices] = await Promise.all([
      fetchCoinData('bitcoin'),
      fetchCoinData('ethereum'),
      fetchCoinData('ripple') // XRPのIDは "ripple"
    ]);

    const labels = btcPrices.map(item => {
      const date = new Date(item[0]);
      return date.toLocaleDateString();
    });

    const btcData = btcPrices.map(item => item[1]);
    const ethData = ethPrices.map(item => item[1]);
    const xrpData = xrpPrices.map(item => item[1]);

    const ctx = document.getElementById('cryptoChart').getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [
          {
            label: 'BTC/JPY',
            data: btcData,
            yAxisID: 'y-left',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
            pointRadius: 0,
            tension: 0.2,
          },
          {
            label: 'ETH/JPY',
            data: ethData,
            yAxisID: 'y-right',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 2,
            pointRadius: 0,
            tension: 0.2,
          },
          {
            label: 'XRP/JPY',
            data: xrpData,
            yAxisID: 'y-xrp',
            borderColor: 'rgba(255, 206, 86, 1)',
            borderWidth: 2,
            pointRadius: 0,
            tension: 0.2,
          }
        ]
      },
      options: {
        responsive: true,
        interaction: {
          mode: 'index',
          intersect: false,
        },
        scales: {
          'y-left': {
            type: 'linear',
            position: 'left',
            title: { display: true, text: 'BTC/JPY' }
          },
          'y-right': {
            type: 'linear',
            position: 'right',
            title: { display: true, text: 'ETH/JPY' },
            grid: { drawOnChartArea: false }
          },
          'y-xrp': {
            type: 'linear',
            position: 'right',
            offset: true,
            title: { display: true, text: 'XRP/JPY' },
            grid: { drawOnChartArea: false }
          },
          x: {
            ticks: { maxTicksLimit: 15 }
          }
        }
      }
    });
  }

  document.addEventListener('DOMContentLoaded', drawChart);
</script>


</main>
<?php get_footer(); ?>

1軸（BTCの過去1年のチャート）

<?php get_header(); ?>
<main>

<canvas id="btcChart" width="600" height="300"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
async function fetchHistoricalBTCData() {
  const res = await fetch('https://api.coingecko.com/api/v3/coins/bitcoin/market_chart?vs_currency=jpy&days=365');
  const data = await res.json();
  
  const labels = data.prices.map(item => {
    const date = new Date(item[0]);
    return date.toLocaleDateString(); // '2024/05/15' など
  });

  const prices = data.prices.map(item => item[1]);

  const ctx = document.getElementById('btcChart').getContext('2d');
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        label: 'BTC/JPY（過去1年）',
        data: prices,
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 2,
        pointRadius: 0,
        tension: 0.2,
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: {
          ticks: {
            maxTicksLimit: 12 // 月ごとなど
          }
        },
        y: {
          beginAtZero: false
        }
      }
    }
  });
}

fetchHistoricalBTCData();

</script>


</main>
<?php get_footer(); ?>
BACK