ダイエットブログに取り入れたい簡単でオシャレなグラフ【プラグインなしコピペOK】

<!-- 体重と体脂肪率のグラフ -->
<script type="text/javascript">
google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {
  // グラフカラー
  var color = ['#41C9B4', '#EA4060'];

  var data = new google.visualization.DataTable();
  data.addColumn('date', '日');
  data.addColumn('number', '体重');
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });
  data.addColumn('number', '体脂肪率');
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });

  // グラフデータ
  data.addRows([
    [new Date(2020, 6, 1), 57.9, '体重', .24, ''],
    [new Date(2020, 7, 1), 57.5, '', .237, ''],
    [new Date(2020, 8, 1), 57.1, '', .238, ''],
    [new Date(2020, 9, 1), 56.4, '', .232, ''],
    [new Date(2020, 10, 1), 55.7, '', .233, ''],
    [new Date(2020, 11, 1), 56.1, '', .238, '体脂肪率'],
    [new Date(2021, 0, 1), 55.2, '', .226, ''],
    [new Date(2021, 1, 1), 54.8, '', .223, ''],
    [new Date(2021, 2, 1), 54.1, '', .214, ''],
    [new Date(2021, 3, 1), 53.2, '', .212, ''],
    [new Date(2021, 4, 1), 52.5, '', .202, ''],
    [new Date(2021, 5, 1), 51.7, '', .196, ''],
    [new Date(2021, 6, 1), 51.5, '', .185, ''],
    [new Date(2021, 7, 1), 51.4, '', .182, ''],
    [new Date(2021, 8, 1), 51.5, '', .181, ''],
  ]);

  var formatter_date = new google.visualization.DateFormat({
    pattern: 'yyyy年M月d日 EE'
  });
  var formatter_kg = new google.visualization.NumberFormat({
    pattern: '#.#kg'
  });
  var formatter_per = new google.visualization.NumberFormat({
    pattern: '#.###%'
  });

  formatter_kg.format(data, 1);
  formatter_date.format(data, 0);
  formatter_per.format(data, 3);

  var options = {
    chartArea: {
      left: 40,
      right: 40,
      top: 20,
      bottom: 60,
      width: '100%',
      height: '100%',
    },
    annotations: {
      alwaysOutside: true,
      highContrast: true,
    },
    crosshair: {
      color: '#000',
      focused: {
        color: '#ccc',
        opacity: 0.6,
      },
      orientation: 'both',
      selected: {
        color: '#f66',
        opacity: 0.5,
      },
      trigger: 'both',
    },
    legend: {
      position: "none"
    },
    focusTarget: 'category',
    height: 400,
    hAxis: {
      format: 'yyyy年M月',
      gridlines: {
        color: '#fff',
        minSpacing: 40,
      },
      textStyle: {
        fontSize: 11,
        color: '#666',
      },
      allowContainerBoundaryTextCutoff: false,
    },
    seriesType: 'bars',
    series: {
      0: {
        color: color[0],
        annotations: {
          stem: {
            color: '#fff',
            length: 4,
          },
          textStyle: {
            color: color[0],
            fontSize: 14,
            bold: true,
            opacity: 1,
          }
        },
      },
      1: {
        annotations: {
          stem: {
            color: '#fff',
            length: 4,
          },
          textStyle: {
            color: color[1],
            fontSize: 14,
            bold: true,
            opacity: 0.9,
          }
        },
        color: color[1],
        type: 'line',
        targetAxisIndex: 1,
        lineDashStyle: [1, 1],
        lineWidth: 3,
        pointSize: 5,
      },
    },
    tooltip: {
      showColorCode: true,
      textStyle: {
        color: '#333',
        fontSize: 16,
      }

    },
    vAxes: {
      // 左側Y軸の設定
      0: {
        ticks: [50, 55, 60],
        format: '#.#kg',
        textPosition: 'out',
        textStyle: {
          color: color[0],
          bold: true,
        },
        gridlines: {
          color: '#fff',
        },
      },
      // 右側Y軸の設定
      1: {
        ticks: [0.15, 0.20, 0.25],
        format: '#.#%',
        textPosition: 'out',
        textStyle: {
          color: color[1],
          bold: true,
        },
        gridlines: {
          color: '#ddd',
        },
      },
    }
  };
  var chart = new google.visualization.ComboChart(document.getElementById("chart_diet"));
  chart.draw(data, options);
}


</script>