家計簿を公開するときに使いたいオシャレなグラフ【プラグインなしコピペOK】

<!-- 家計収支のグラフ -->
<script type="text/javascript">

google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {

  // グラフカラー
  var color = ['#F9BA00', '#5DCAB5', '#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.addColumn('number', '累計貯蓄');
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });

  // グラフデータ
  data.addRows([
    [new Date(2020, 3, 1), 350000, '', 300000, '', 50000, ''],
    [new Date(2020, 4, 1), 360000, '', 350000, '', 60000, ''],
    [new Date(2020, 5, 1), 880000, '収入', 760000, '支出', 180000, ''],
    [new Date(2020, 6, 1), 360000, '', 300000, '', 240000, ''],
    [new Date(2020, 7, 1), 330000, '', 380000, '', 190000, ''],
    [new Date(2020, 8, 1), 340000, '', 300000, '', 230000, ''],
    [new Date(2020, 9, 1), 340000, '', 320000, '', 250000, ''],
    [new Date(2020, 10, 1), 360000, '', 310000, '', 300000, ''],
    [new Date(2020, 11, 1), 950000, '', 780000, '', 470000, ''],
    [new Date(2021, 0, 1), 360000, '', 320000, '', 510000, ''],
    [new Date(2021, 1, 1), 370000, '', 330000, '', 550000, ''],
    [new Date(2021, 2, 1), 370000, '', 300000, '', 620000, '累計貯蓄'],
  ]);

  var formatter_date = new google.visualization.DateFormat({
    pattern: 'yyyy年M月'
  });
  var formatter_yen = new google.visualization.NumberFormat({
    pattern: '#,###円'
  });
  formatter_date.format(data, 0);
  formatter_yen.format(data, 1);
  formatter_yen.format(data, 3);
  formatter_yen.format(data, 5);

  var options = {
    chartArea: {
      left: 70,
      right: 20,
      top: 20,
      bottom: 60,
      width: '100%',
      height: '100%',
    },
    annotations: {
      alwaysOutside: true,
      highContrast: true,
      stem: {
        length: 0,
      },
    },
    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,
    isStacked: false,
    seriesType: 'bars',
    series: {
      0: {
        color: color[0],
        annotations: {
          stem: {
            color: '#fff',
            length: 3,
          },
          textStyle: {
            color: color[0],
            fontSize: 14,
            bold: true,
          }
        },
      },
      1: {
        color: color[1],
        annotations: {
          stem: {
            color: '#fff',
            length: 3,
          },
          textStyle: {
            fontSize: 14,
            bold: true,
          }
        },
      },
      2: {
        annotations: {
          stem: {
            color: '#fff',
            length: 10,
          },
          textStyle: {
            fontSize: 14,
            bold: true,
          }
        },
        color: color[2],
        type: 'line',
        lineDashStyle: [2, 2],
        lineWidth: 3,
        pointSize: 5,
      },
    },
    tooltip: {
      showColorCode: true,
      textStyle: {
        color: '#333',
        fontSize: 16,
      }

    },
    hAxis: {
      format: 'M月',
      gridlines: {
        color: '#fff',
        minSpacing: 40,
      },
      textStyle: {
        fontSize: 11,
        color: '#666',
      },
      allowContainerBoundaryTextCutoff: false,
    },
    vAxis: {
      textPosition: 'out',
      textStyle: {
        color: '#666',
        bold: true,

      },
      gridlines: {
        color: '#ccc',
      },
      // Y軸の設定
      ticks: [0, 500000, 1000000],
      format: '#,###円',
    }
  };
  var chart = new google.visualization.ComboChart(document.getElementById("chart_kakei"));
  chart.draw(data, options);
}

</script>