在另一个 HTML 页面上显示 HTML 值的 JavaScript

标签 javascript jquery html css local-storage

以下 2 个 div 正在使用本地存储将测试和时间输出到 HTML 页面上。这 2 个值在 HTML 页面上显示正常。

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

我如何更改此 JavaScript 代码上的 y 值以匹配本地存储值,以便它“测试 1= 0.25”,这将显示在图表上。

<!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”值吗?

enter image description here

最佳答案

首先创建一个空的 dataPoints 数组,遍历 localStorage 对象创建一个带有 Y 和测试值的对象,然后推送到 dataPoints 数组

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

关于在另一个 HTML 页面上显示 HTML 值的 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36461615/

相关文章:

javascript - 平方米计算器帮助四舍五入平方米

javascript - 使用jquery将内容包装在一个div中

html - 如何将此表格布局转换为 div 布局?

javascript - 添加新事件而不删除 FullCalendar 中的现有事件

javascript - 是否可以使用 WebRTC getusermedia 和 HTML5 访问整个屏幕?

javascript - 如何在后台创建异步循环?

html - CSS 选择器不工作

html - 不确定如何让加载屏幕消失?

javascript - 当输入集中时,不会更新 ng-model

javascript - 使用 jquery-ui 的可排序小部件更新排序顺序值