1 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>2 <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>3 <script src="https://www.chartjs.org/samples/latest/utils.js"></script>4 5 6 7 <div style="width:1000px">8 <p>This example demonstrates a time series scale by drawing a financial line chart using just the core library. For more specific functionality for financial charts, please see <a href="https://github.com/chartjs/chartjs-chart-financial">chartjs-chart-financial</a></p>9 <canvas id="chart1"></canvas>10 </div>11 <br>12 <br>13 Chart Type:14 <select id="type">15 <option value="bar">Bar</option>16 <option value="line">Line</option>17 </select>18 <select id="unit">19 <option value="second">Second</option>20 <option value="minute">Minute</option>21 <option value="hour">Hour</option>22 <option value="day" selected>Day</option>23 <option value="month">Month</option>24 <option value="year">Year</option>25 </select>26 <button id="update">update</button>27 <script>28 function generateData() {29 var unit = document.getElementById('unit').value;30 31 function unitLessThanDay() {32 return unit === 'second' || unit === 'minute' || unit === 'hour';33 }34 35 function beforeNineThirty(date) {36 return date.hour() < 9 || (date.hour() === 9 && date.minute() < 30);37 }38 39 // Returns true if outside 9:30am-4pm on a weekday40 function outsideMarketHours(date) {41 if (date.isoWeekday() > 5) {42 return true;43 }44 if (unitLessThanDay() && (beforeNineThirty(date) || date.hour() > 16)) {45 return true;46 }47 return false;48 }49 50 function randomNumber(min, max) {51 return Math.random() * (max - min) + min;52 }53 54 function randomBar(date, lastClose) {55 var open = randomNumber(lastClose * 0.95, lastClose * 1.05).toFixed(2);56 var close = randomNumber(open * 0.95, open * 1.05).toFixed(2);57 return {58 t: date.valueOf(),59 y: close60 };61 }62 63 64 var data = [];65 var lessThanDay = unitLessThanDay();66 for (let i=631148400000; i<633826800000; i+=172800000) {67 data.push({t:i, y:randomNumber(100 * 0.95, 200 * 1.05).toFixed(2)});68 }69 70 return data;71 }72 73 console.log(generateData());74 75 var ctx = document.getElementById('chart1').getContext('2d');76 ctx.canvas.width = 1000;77 ctx.canvas.height = 300;78 79 var color = Chart.helpers.color;80 var cfg = {81 data: {82 datasets: [{83 label: 'CHRT - Chart.js Corporation',84 backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),85 borderColor: window.chartColors.red,86 data: generateData(),87 type: 'bar',88 pointRadius: 0,89 fill: false,90 lineTension: 0,91 borderWidth: 292 },{93 label: 'CHRT - Chart.js Corporation',94 backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),95 borderColor: window.chartColors.green,96 data: generateData(),97 type: 'bar',98 pointRadius: 0,99 fill: false,100 lineTension: 0,101 borderWidth: 2102 }]103 },104 options: {105 animation: {106 duration: 256, // animation in milliseconds (I guess)107 },108 scales: {109 xAxes: [{110 type: 'time',111 //distribution: 'series',112 offset: true,113 ticks: {114 major: {115 enabled: false,116 fontStyle: 'bold'117 },118 source: 'data',119 autoSkip: true,120 autoSkipPadding: 75,121 maxRotation: 0,122 sampleSize: 100123 },124 afterBuildTicks: function(scale, ticks) {125 console.log('scale:', scale);126 console.log('ticks:', ticks);127 /*128 var majorUnit = scale._majorUnit;129 var firstTick = ticks[0];130 var i, ilen, val, tick, currMajor, lastMajor;131 132 firstTick.major = false;133 134 val = moment(ticks[0].value);135 if ((majorUnit === 'minute' && val.second() === 0)136 || (majorUnit === 'hour' && val.minute() === 0)137 || (majorUnit === 'day' && val.hour() === 9)138 || (majorUnit === 'month' && val.date() <= 3 && val.isoWeekday() === 1)139 || (majorUnit === 'year' && val.month() === 0)) {140 //firstTick.major = true;141 } else {142 //firstTick.major = false;143 }144 145 //lastMajor = val.get(majorUnit);146 147 for (i = 1, ilen = ticks.length; i < ilen; i++) {148 tick = ticks[i];149 val = moment(tick.value);150 currMajor = val.get(majorUnit);151 tick.major = currMajor !== lastMajor;152 lastMajor = currMajor;153 }*/154 return ticks;155 }156 }],157 yAxes: [{158 gridLines: {159 drawBorder: false160 },161 scaleLabel: {162 display: true,163 labelString: 'Closing price ($)'164 }165 }]166 },167 tooltips: {168 intersect: false,169 mode: 'index',170 callbacks: {171 label: function(tooltipItem, myData) {172 var label = myData.datasets[tooltipItem.datasetIndex].label || '';173 if (label) {174 label += ': ';175 }176 label += parseFloat(tooltipItem.value).toFixed(2);177 return label;178 }179 }180 }181 }182 };183 184 var chart = new Chart(ctx, cfg);185 186 document.getElementById('update').addEventListener('click', function() {187 var type = document.getElementById('type').value;188 var dataset = chart.config.data.datasets[0];189 dataset.type = type;190 dataset.data = generateData();191 chart.update();192 });193 194 </script>195 Enlace
El enlace para compartir es: