areaspline.htm 2.37 KB
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Highcharts Example</title>

    <style type="text/css"></style>
  </head>
  <body>
    <script src="../../code/highcharts.js"></script>
    <script src="../../code/modules/exporting.js"></script>
    <script src="../../code/modules/export-data.js"></script>

    <div
      id="container"
      style="min-width: 310px; height: 400px; margin: 0 auto"
    ></div>

    <script type="text/javascript">
      var death = [3, 4, 3, 5, 4, 10, 12,1,2,3];
      var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6];

      var chart = Highcharts.chart("container", {
        chart: {
          type: "areaspline"
        },
        title: {
          text: "실시간 사망률"
        },
        legend: {
          layout: "vertical",
          align: "left",
          verticalAlign: "top",
          x: 120,
          y: 70,
          floating: true,
          borderWidth: 1,
          backgroundColor:
            (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
            "#FFFFFF"
        },
        xAxis: {
          categories: [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
            "Sunday",
            "Sunday",
            "Sunday",
            "Sunday"
          ],
          plotBands: [
            {
              // 색칠되는 구간
              from: 7.5,
              to: 10.5,
              color: "rgba(68, 170, 213, .2)"
            }
          ]
        },
        yAxis: {
          title: {
            text: "Fruit units"
          }
        },
        tooltip: {
          shared: true,
          valueSuffix: " %", //point mouseover 단위
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          areaspline: {
            fillOpacity: 0.5
          }
        },
        series: [
          {
            name: "사망률(%)",
            data: []
          },
          {
            name: "기온('C)",
            data: []
          }
        ]
      });
      
      death.shift();
      temp.shift();

      death.push(11);
      temp.push(3);

      chart.series[0].setData(death);
      chart.series[1].setData(temp);

    </script>
  </body>
</html>