end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

highcharts によるスパークライングラフの表示

以下の通り。結局は Highcharts.Chart()で、小さなグラフを複数表示しているだけ。

参考url

html & javascript

<html lang="ja">
<head>
</head>
<body>
  
<table id="table-sparkline">
  <thead>
    <tr>
      <th>State</th><th>Income per quarter</th>
    </tr>
  </thead>
  <tbody id="tbody-sparkline">
    <tr>
      <th>Alabama</th><td data-sparkline="71, 78, 39, 66 "/>
    </tr>
    <tr>
      <th>Alaska</th><td data-sparkline="87, 44, 74, 41 "/>
    </tr>
  </tbody>
</table>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script>
  const default_options = {
      chart: {width   : 300,
              height  : 30,
              type    : 'area',
              backgroundColor: null,
              borderWidth: 0,
              margin: [2, 0, 2, 0],
              style: {overflow: 'visible'} },
      title  : {text: '' },
      credits: {enabled: false},
      xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr'],
              startOnTick: false,
              endOnTick  : false,
              tickPositions: [],
             },
      yAxis: {startOnTick: false,
              endOnTick  : false,
              tickPositions: [0] },
      legend : {enabled: false    },
      tooltip: {hideDelay: 0,
                outside: true,
                shared : true},
      plotOptions: {series: {animation: false,
                             lineWidth: 1,
                             marker   : {radius: 2},
                             fillOpacity: 0.25 } },
      accessibility:{enabled :false }
  };

  let dispSparklineCharts=()=>{
      let  tds = Array.from(document.querySelectorAll('td[data-sparkline]'));
      
      for (let i = 0; i < tds.length; i += 1) {
          const td = tds[i];
          const stringdata = td.dataset.sparkline;
          const arr = stringdata.split('; ');
          const data = arr[0].split(', ').map(parseFloat);
          
          let options = Highcharts.merge(
              default_options,
              {series : [{data: data}],
               tooltip: {headerFormat: '<span>{point.x}</span><br/>',
                         pointFormat : '<b>{point.y}</b>'},
              });
          new Highcharts.Chart(td, options);
      }
  }

dispSparklineCharts();
</script>
</body>
</html>