別のHTMLページにHTML値を表示するJavaScript

次の2つのdivは、ローカルストレージを使用してHTMLページにテストと時間を出力しています。これらの2つの値は、HTMLページで正常に表示されます。このグラフ上に表示されるそれは、試験1 = 0.25」となるよう私はこのJavaScriptコード上のY値は、ローカルストレージ値と一致するように変更することができる方法別のHTMLページにHTML値を表示するJavaScript

<div id="test"> 
    </div> 
    <div id="time"> 
    </div>

。

<!DOCTYPE HTML> 
<html> 

<head> 
    <script type="text/javascript"> 
    window.onload = function() { 
    var chart = new CanvasJS.Chart("chartContainer", 
    { 
     animationEnabled: true, 
     legend: { 
     cursor:"pointer", 
     itemclick : function(e) { 
      if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { 
       e.dataSeries.visible = false; 
      } 
      else { 
       e.dataSeries.visible = true; 
      } 
      chart.render(); 
     } 
     }, 
     axisY: { 
     title: "Time" 
     }, 
     toolTip: { 
     shared: true, 
     content: function(e){ 
      var str = ''; 
      var total = 0 ; 
      var str3; 
      var str2 ; 
      for (var i = 0; i < e.entries.length; i++){ 
      var str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+ e.entries[i].dataPoint.y + "</strong> <br/>" ; 
      total = e.entries[i].dataPoint.y + total; 
      str = str.concat(str1); 
      } 
      str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>"; 
      str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>"; 

      return (str2.concat(str)).concat(str3); 
     } 

     }, 
     data: [ 
     {   
     type: "bar", 
     showInLegend: true, 
     name: "Black", 
     color: "#000000", 
     dataPoints: [ 
     { y: 0.18, label: "Test"}, 
     { y: 0.12, label: "Test 1"}, 
     { y: 0.59, label: "Test 2"},   
     { y: 1.15, label: "Test 3"},   
     ] 
     }, 
     ] 
    }); 

chart.render(); 
} 
</script> 

     <script type="text/javascript" src="js/canvasjs.min.js"></script> 
     <script type="text/javascript" src="js/chart.js"></script> 

    </head> 

    <body> 
     <div id="bar" class="full-width"> 

      <span>Results</span> 
     </div> 
     <br> 

     <div id="chartContainer" style="height: 300px; width: 100%;"></div> 
    </body> 
</html>

このチャートは、私はそれに「DIV」の値を表示することができます思っていたのに対し、それに入力された値を設定していますか？

出典

2016-04-06 userdanhas1994

最初のYとテスト値を持つオブジェクトを作成し、私は理解していないdataPointsの配列

dataPoints =[]; 
for(loop through local storage obj) { 
var coordObj ={}; 
coordObj.Y = value from local storage 
coordObj.label = "test 
dataPoints.push(coordObj); 
}

出典

2016-04-06 20:54:53 sushma

にプッシュのlocalStorageオブジェクトを反復処理し、空dataPointsの配列を作成し、あなたはより多くを説明できますか？私は '時間'と '期間'の値をグラフに表示しようとしていますか？ – userdanhas1994

コンストラクトdataPointsキー、値と時間のペアのオブジェクトの配列 – sushma

データポイントにY値 – sushma

別のHTMLページにHTML値を表示するJavaScript

答えて

関連する問題