JavaScript

Last-modified: 2024-08-09 (金) 15:26:25

JavaScript

サンプル

組合せ(参考)

GoogleChart　ローソク足と出来高を表示させるグラフ

<!DOCTYPE html>
<html>
 <head>
   <title>ローソク足と出来高チャート</title>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
     google.charts.load('current', { packages: ['corechart', 'controls'] });
     google.charts.setOnLoadCallback(drawChart);
     function drawChart() {
       var data = new google.visualization.DataTable();
       data.addColumn('string', '日付');
       data.addColumn('number', 'ローソク足（最低値）');
       data.addColumn('number', 'ローソク足（始値）');
       data.addColumn('number', 'ローソク足（終値）');
       data.addColumn('number', 'ローソク足（最高値）');
       data.addColumn('number', '出来高');
       data.addRows([
         ['900', 800, 850, 870, 890, 50000],
         ['901', 820, 900, 820, 900, 160000],
         ['902', 830, 910, 890, 910, 370000],
         ['903', 840, 880, 900, 920, 80000],
         ['904', 850, 890, 910, 1130, 90000]
       ]);
       var chartDiv = document.getElementById('chart_div');
       var candleChart = new google.visualization.CandlestickChart(chartDiv);
       candleChart.draw(data, {
         title: 'ローソク足と出来高チャート',
         legend: 'none',
         seriesType: 'candlesticks',
         series: {
           0: {type: 'candlesticks'},
           1: {
             type: 'line',
             targetAxisIndex: 1,
             color: 'blue',
             lineWidth: 2
           }
         },
         vAxes: {
           0: {
             title: '価格',
             ticks: [{v:850, f:'￥850'},{v:950, f:'￥950'}, 800, 1100], // 900円の位置に赤い目盛り線を追加
             textStyle: { color: 'red' },
             baselineColor: 'red',
             gridlines: { color: 'transparent' },
             minorGridlines: { color: 'transparent' }
           },
           1: {title: '出来高'}
         },
         hAxis: {
           title: '時刻'
         },
         vAxis: {
           0: {
             format: 'short'
           },
           1: {
             format: 'short'
           }
         }
       });
     }
   </script>
 </head>
 <body>
   <div id="chart_div" style="width: 900px; height: 500px;"></div>
 </body>
</html>