尝试使用图表.js绘制条形图。
当我向它提供下面的数据时，它将首先显示所有整数，然后显示小数。如您所见，我尝试将键转换为浮动，但是，我仍然得到同样的东西。
有没有人知道为什么剧情先显示整数？
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>
<!-- <script src="app.js"></script> -->
</head>
<body>
<h1>
Snapshot Chart
</h1>
<div class="chart" height="400" width="400">
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var snapshot = {
5590.0: 28.89890034,
5590.22: 28.84890034,
5590.92: 24.14890034,
5591.5: 24.12890034,
5592.38: 24.11230034,
5594.13: 24.09590034,
5595.0: 23.99590034,
5595.1: 23.98586534,
5595.14: 23.88586534,
5595.16: 18.58586534,
5595.52: 17.45586534,
5595.53: 17.43946534,
5596.62: 16.33946534,
5598.98: 16.32286534,
5598.99: 16.27015,
5599.66: 16.25355,
5599.76: 11.45355,
5599.78: 11.43715,
5600.0: 11.33715,
5600.52: 11.32715,
5601.06: 11.31715,
5601.7: 11.30055,
5603.41: 11.28415,
5604.18: 11.26775,
5604.19: 6.64775,
5604.26: 5.60775,
5604.27: 5.59115,
5605.61: 4.55115,
5606.95: 4.53455,
5606.96: 4.51795,
5607.47: 3.91795,
5608.14: 3.90155,
5608.18: 3.55855,
5608.29: 2.31158,
5608.3: 2.25158,
5611.0: 2.15158,
5613.94: 2.14046,
5613.95: 0.358,
5616.64: 0.06,
5616.79: 0.01,
5616.8: 0.06122924,
5616.82: 0.11689229,
5616.84: 0.16749515,
5616.85: 0.21349783,
5617.2: 0.25531852,
5617.21: 0.2933374,
5617.5: 0.6153374,
5617.86: 0.64990008,
5617.88: 0.68132075,
5617.89: 0.70988505,
5617.9: 0.73585264,
5617.91: 0.75945958,
5617.92: 0.78092048,
5618.2: 0.8004182,
5619.31: 2.5834882,
5619.39: 3.1865882,
5620.0: 3.1965882,
5620.84: 3.21431504,
5620.87: 3.23043038,
5620.89: 3.24508079,
5620.92: 3.25839944,
5620.93: 3.27050732,
5620.94: 3.28151466,
5620.97: 3.29152636,
5623.44: 20.06906733,
5623.46: 24.54906733,
5626.85: 25.79761733,
5627.0: 25.80790432,
5628.13: 30.79790432,
5631.01: 30.81790432,
5631.19: 31.67990432,
5631.59: 32.39463287,
5632.38: 32.50142845,
5632.78: 32.57805041,
5632.81: 36.27805041,
5633.18: 36.32805041,
5636.37: 40.44805041,
5636.48: 40.46805041,
5637.0: 40.47805041,
5639.27: 40.48805041,
5639.8: 55.75838641,
5639.82: 59.55838641,
5640.0: 59.56838641,
5640.66: 59.57838641,
5640.69: 59.58838641,
5640.84: 59.61058741,
5640.85: 59.62058741,
5641.01: 59.64058741,
5641.55: 59.65058741,
5641.62: 59.66058741,
5643.01: 59.72548741,
5643.28: 63.46548741,
5645.0: 63.96528741,
5646.15: 65.77811741,
}
var keyArray = Object.keys(snapshot)
for (var i = 0; i < keyArray.length; i++) {
keyArray[i] = parseFloat(keyArray[i])
}
var valueArray = Object.values(snapshot)
for (var i = 0; i < valueArray.length; i++) {
valueArray[i] = parseFloat(valueArray[i])
}
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: keyArray,
datasets: [{
label: 'Volume',
data: valueArray,
backgroundColor: CanvasGradient,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
}
}]
}
}
});
</script>
</div>
</body>
</html>
稍微
改变数据格式似乎可以解决问题。如果在 x 轴值周围添加单引号，则它应按正确的顺序显示。
因此，snapshot变量将变为：
var snapshot = {
'5590.0': 28.89890034,
'5590.22': 28.84890034,
'5590.92': 24.14890034,
'5591.5': 24.12890034,
'5592.38': 24.11230034,
'5594.13': 24.09590034,
'5595.0': 23.99590034,
'5595.1': 23.98586534,
'5595.14': 23.88586534,
'5595.16': 18.58586534,
'5595.52': 17.45586534,
'5595.53': 17.43946534,
'5596.62': 16.33946534,
'5598.98': 16.32286534,
'5598.99': 16.27015,
'5599.66': 16.25355,
'5599.76': 11.45355,
'5599.78': 11.43715,
'5600.0': 11.33715,
'5600.52': 11.32715,
'5601.06': 11.31715,
'5601.7': 11.30055,
'5603.41': 11.28415,
'5604.18': 11.26775,
'5604.19': 6.64775,
'5604.26': 5.60775,
'5604.27': 5.59115,
'5605.61': 4.55115,
'5606.95': 4.53455,
'5606.96': 4.51795,
'5607.47': 3.91795,
'5608.14': 3.90155,
'5608.18': 3.55855,
'5608.29': 2.31158,
'5608.3': 2.25158,
'5611.0': 2.15158,
'5613.94': 2.14046,
'5613.95': 0.358,
'5616.64': 0.06,
'5616.79': 0.01,
'5616.8': 0.06122924,
'5616.82': 0.11689229,
'5616.84': 0.16749515,
'5616.85': 0.21349783,
'5617.2': 0.25531852,
'5617.21': 0.2933374,
'5617.5': 0.6153374,
'5617.86': 0.64990008,
'5617.88': 0.68132075,
'5617.89': 0.70988505,
'5617.9': 0.73585264,
'5617.91': 0.75945958,
'5617.92': 0.78092048,
'5618.2': 0.8004182,
'5619.31': 2.5834882,
'5619.39': 3.1865882,
'5620.0': 3.1965882,
'5620.84': 3.21431504,
'5620.87': 3.23043038,
'5620.89': 3.24508079,
'5620.92': 3.25839944,
'5620.93': 3.27050732,
'5620.94': 3.28151466,
'5620.97': 3.29152636,
'5623.44': 20.06906733,
'5623.46': 24.54906733,
'5626.85': 25.79761733,
'5627.0': 25.80790432,
'5628.13': 30.79790432,
'5631.01': 30.81790432,
'5631.19': 31.67990432,
'5631.59': 32.39463287,
'5632.38': 32.50142845,
'5632.78': 32.57805041,
'5632.81': 36.27805041,
'5633.18': 36.32805041,
'5636.37': 40.44805041,
'5636.48': 40.46805041,
'5637.0': 40.47805041,
'5639.27': 40.48805041,
'5639.8': 55.75838641,
'5639.82': 59.55838641,
'5640.0': 59.56838641,
'5640.66': 59.57838641,
'5640.69': 59.58838641,
'5640.84': 59.61058741,
'5640.85': 59.62058741,
'5641.01': 59.64058741,
'5641.55': 59.65058741,
'5641.62': 59.66058741,
'5643.01': 59.72548741,
'5643.28': 63.46548741,
'5645.0': 63.96528741,
'5646.15': 65.77811741,
}
希望这有帮助。