Chart 8. Paleto2

by rough cheap

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var salesData = [
    19630770,
    6202180,
    5398800,
    5397370,
    4419560,
    2533000,
    1804000,
    1541280,
    1272240,
    1220070,
    1156800,
    842100,
    516670,
    479320,
    452200,
    395390,
    323440,
    183680,
    170430,
    161100,
    122430,
    75720,
    58520,
    56630,
    46860,
    17520
  ];
  var percentage = [
    0.3603,
    0.4742,
    0.5733,
    0.6724,
    0.7535,
    0.8,
    0.8331,
    0.8614,
    0.8847,
    0.9071,
    0.9284,
    0.9438,
    0.9533,
    0.9621,
    0.9704,
    0.9777,
    0.9836,
    0.9870,
    0.9901,
    0.9931,
    0.9953,
    0.9967,
    0.9978,
    0.9988,
    0.9997,
    1
  ];
  var labels = [
    "ショートソード",
    "薬草＋１",
    "薬草",
    "ロングソード",
    "革の鎧",
    "ロングソード＋１",
    "まよけ",
    "回復の巻物",
    "メイス",
    "グレートソード",
    "ブレストプレート＋１",
    "鎧帷子",
    "解毒剤",
    "気付け薬",
    "解毒の巻物",
    "光の盾",
    "ドラゴンスレイヤー",
    "魚の干物",
    "フレイル",
    "食事セット",
    "干し肉",
    "光の鎧",
    "ミルク",
    "光の剣",
    "伝説の鎧",
    "パン"
  ];
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels,
      datasets: [{
        label: '売上',
        type: 'bar',
        data: salesData,
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1,
        yAxisID: 'y-axis-sales'
      }, {
        label: '比率の累計',
        type: 'line',
        data: percentage,
        backgroundColor: 'rgba(99, 132, 255, 0.2)',
        borderColor: 'rgba(99, 132, 255, 1)',
        borderWidth: 1,
        yAxisID: 'y-axis-percentage'
      }]
    },
    options: {
      scales: {
        yAxes: [{
          id: 'y-axis-sales',
          type:...