내 chart.js barograph 순서를 정수로 곱한 다음 떠 다니는 이유는 무엇입니까?

Chart.js를 사용하여 막 대형 차트를 플롯하려고 시도했습니다.내 chart.js barograph 순서를 정수로 곱한 다음 떠 다니는 이유는 무엇입니까?

아래의 데이터를 입력하면 모든 정수를 먼저 표시 한 다음 소수를 표시합니다. 나는 볼 수 있듯이 키를 수레로 변환하려했지만, 나는 여전히 같은 것을 얻고있다.

줄거리에 정수가 먼저 표시되는 이유는 누구나 알 수 있습니까?

<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>

출처

2017-10-16 Dale King

JavaScript의'객체'에는 정의 된 순서가 없습니다. 당신이 그들을 열거하려고 시도 할 때 당신은 의지 할 수 없습니다. – Phylogenesis

데이터 형식을 약간 변경하면 문제가 해결되는 것 같습니다. 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, 
}

희망이 도움이됩니다.

출처

2017-10-17 09:03:01

내 chart.js barograph 순서를 정수로 곱한 다음 떠 다니는 이유는 무엇입니까?

답변

관련 문제