0

试图让这个脚本每隔一秒重新加载一次随机变量。我得到的只是第一组数据，chart.render 似乎只在它没有嵌套在函数中时才起作用。似乎是“工作”功能被破坏了。我为折线图尝试了 canvasjs 解决方案，它也不起作用。有任何想法吗？

    <!DOCTYPE HTML>
<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF8">
<script type="text/javascript" src="canvasjs.min.js"></script>

<script type="text/javascript">  
  var f86,f810,f814,f816,d96,d910,d914,d916,d86,d810,d814,d816,c46,c410,c414,c416;
                f86 = Math.floor(Math.random() * 10) + 80 +1;
                f810 = Math.floor(Math.random() * 10) + 80 +1;
                f814 = Math.floor(Math.random() * 10) + 80 +1;
                f818 = Math.floor(Math.random() * 10) + 80 +1;
                d96 = Math.floor(Math.random() * 10) + 80 +1;;
                d910 = Math.floor(Math.random() * 10) + 80 +1;
                d914 = Math.floor(Math.random() * 10) + 80 +1;
                d918 = Math.floor(Math.random() * 10) + 80 +1;  
                d86 = Math.floor(Math.random() * 10) + 80 +1;
                d810 = Math.floor(Math.random() * 10) + 80 +1;
                d814 = Math.floor(Math.random() * 10) + 80 +1;
                d818 = Math.floor(Math.random() * 10) + 80 +1; 
                c46 = Math.floor(Math.random() * 10) + 80 +1;
                c410 = Math.floor(Math.random() * 10) + 80 +1;
                c414 = Math.floor(Math.random() * 10) + 80 +1;
                c418 = Math.floor(Math.random() * 10) + 80 +1;

    window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      axisX:{tickThickness: 1,lineThickness: 1},
      toolTip:{enabled: false},
      axisY: {includeZero: false,suffix: "C",minimum: 0,maximum: 123,tickThickness: 1,lineThickness: 1,gridThickness: 1},
      data:[
      {
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "6'",color: "#8080E6",indexLabelPlacement: "inside",indexLabelFontColor: "white",
        dataPoints: [{ y: c46, label: "C4"},{ y: d86, label: "D8"},{ y: d96, label: "D9"},{ y: f86, label: "F8"}]
      },
      {  
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "10'",color: "#3333D6",indexLabelPlacement: "inside",indexLabelFontColor: "white",        
        dataPoints: [{ y: c410, label: "C4"},{ y: d810, label: "D8"},{ y: d910, label: "D9"},{ y: f810, label: "F8"}]
      },
      {
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "14'",color: "#0000B8",indexLabelPlacement: "inside",indexLabelFontColor: "white",
        dataPoints: [{ y: c414, label: "C4"},{ y: d814, label: "D8"},{ y: d914, label: "D9"},{ y: f814, label: "F8"}]
      },
      {  
        type: "bar",indexLabel: "{y} C ",showInLegend: true,name: "18'",color: "#000066",indexLabelPlacement: "inside",indexLabelFontColor: "white",
        dataPoints: [{ y: c418, label: "C4"},{ y: d818, label: "D8"},{ y: d918, label: "D9"},{ y: f818, label: "F8"}]
      }
      ]
    });

    chart.render(); 

}
  function work() {
                f86++;
                f810 = Math.floor(Math.random() * 10) + 80 +1;
                f814 = Math.floor(Math.random() * 10) + 80 +1;
                f818 = Math.floor(Math.random() * 10) + 80 +1;
                d96 = Math.floor(Math.random() * 10) + 80 +1;;
                d910 = Math.floor(Math.random() * 10) + 80 +1;
                d914 = Math.floor(Math.random() * 10) + 80 +1;
                d918 = Math.floor(Math.random() * 10) + 80 +1;  
                d86 = Math.floor(Math.random() * 10) + 80 +1;
                d810 = Math.floor(Math.random() * 10) + 80 +1;
                d814 = Math.floor(Math.random() * 10) + 80 +1;
                d818 = Math.floor(Math.random() * 10) + 80 +1; 
                c46 = Math.floor(Math.random() * 10) + 80 +1;
                c410 = Math.floor(Math.random() * 10) + 80 +1;
                c414 = Math.floor(Math.random() * 10) + 80 +1;
                c418 = Math.floor(Math.random() * 10) + 80 +1;
                chart.render(); 
          setTimeout('work()', 100);
          }
          work();
</script>


</head>

<body><br>

  <div style="width: 850px; overflow: auto; padding: 1em; margin: auto; float:center">
   <div id="chartContainer" style="height: 400px; width: 500px; float:left"></div>


  </div>
</body>
</html>
4

1 回答 1

0

我对 CanvasJs 了解不多，我只是在阅读您的问题后进行了游览，但似乎要重绘图表，您每次都需要创建一个新实例（如果我错了，请纠正我，因为我可能不会消息灵通）。

无论如何，我通过将代码从 window.onload 取出到我调用drawChart并在函数中重用它的函数中得到了一些结果，work现在代码看起来像这样

我在这里做了一个jsfiddle

(function () {
    'use strict';

    var f86, f810, f814, f816, f818, d96, d910, d914, d916, d918, d86, d810, d814, d816, d818, c46, c410, c414, c416, c418;

    f86 = Math.floor(Math.random() * 10) + 80 + 1;
    f810 = Math.floor(Math.random() * 10) + 80 + 1;
    f814 = Math.floor(Math.random() * 10) + 80 + 1;
    f818 = Math.floor(Math.random() * 10) + 80 + 1;
    d96 = Math.floor(Math.random() * 10) + 80 + 1;;
    d910 = Math.floor(Math.random() * 10) + 80 + 1;
    d914 = Math.floor(Math.random() * 10) + 80 + 1;
    d918 = Math.floor(Math.random() * 10) + 80 + 1;
    d86 = Math.floor(Math.random() * 10) + 80 + 1;
    d810 = Math.floor(Math.random() * 10) + 80 + 1;
    d814 = Math.floor(Math.random() * 10) + 80 + 1;
    d818 = Math.floor(Math.random() * 10) + 80 + 1;
    c46 = Math.floor(Math.random() * 10) + 80 + 1;
    c410 = Math.floor(Math.random() * 10) + 80 + 1;
    c414 = Math.floor(Math.random() * 10) + 80 + 1;
    c418 = Math.floor(Math.random() * 10) + 80 + 1;

    window.onload = function () {
        drawChart();
    }

    function work() {
        f86++;
        f810 = Math.floor(Math.random() * 10) + 80 + 1;
        f814 = Math.floor(Math.random() * 10) + 80 + 1;
        f818 = Math.floor(Math.random() * 10) + 80 + 1;
        d96 = Math.floor(Math.random() * 10) + 80 + 1;;
        d910 = Math.floor(Math.random() * 10) + 80 + 1;
        d914 = Math.floor(Math.random() * 10) + 80 + 1;
        d918 = Math.floor(Math.random() * 10) + 80 + 1;
        d86 = Math.floor(Math.random() * 10) + 80 + 1;
        d810 = Math.floor(Math.random() * 10) + 80 + 1;
        d814 = Math.floor(Math.random() * 10) + 80 + 1;
        d818 = Math.floor(Math.random() * 10) + 80 + 1;
        c46 = Math.floor(Math.random() * 10) + 80 + 1;
        c410 = Math.floor(Math.random() * 10) + 80 + 1;
        c414 = Math.floor(Math.random() * 10) + 80 + 1;
        c418 = Math.floor(Math.random() * 10) + 80 + 1;
        drawChart();
        setTimeout(work, 100);
    }

    function drawChart() {
        var chart = new CanvasJS.Chart("chartContainer", {
            axisX: {
                tickThickness: 1,
                lineThickness: 1
            },
            toolTip: {
                enabled: false
            },
            axisY: {
                includeZero: false,
                suffix: "C",
                minimum: 0,
                maximum: 123,
                tickThickness: 1,
                lineThickness: 1,
                gridThickness: 1
            },
            data: [{
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "6'",
                color: "#8080E6",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c46,
                    label: "C4"
                }, {
                    y: d86,
                    label: "D8"
                }, {
                    y: d96,
                    label: "D9"
                }, {
                    y: f86,
                    label: "F8"
                }]
            }, {
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "10'",
                color: "#3333D6",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c410,
                    label: "C4"
                }, {
                    y: d810,
                    label: "D8"
                }, {
                    y: d910,
                    label: "D9"
                }, {
                    y: f810,
                    label: "F8"
                }]
            }, {
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "14'",
                color: "#0000B8",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c414,
                    label: "C4"
                }, {
                    y: d814,
                    label: "D8"
                }, {
                    y: d914,
                    label: "D9"
                }, {
                    y: f814,
                    label: "F8"
                }]
            }, {
                type: "bar",
                indexLabel: "{y} C ",
                showInLegend: true,
                name: "18'",
                color: "#000066",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: [{
                    y: c418,
                    label: "C4"
                }, {
                    y: d818,
                    label: "D8"
                }, {
                    y: d918,
                    label: "D9"
                }, {
                    y: f818,
                    label: "F8"
                }]
            }]
        });

        chart.render();
    }
    work();

}());

作为旁注

即使这些是数字，让这么多全局变量徘徊通常是一种不好的做法，这就是为什么我将它全部包装在一个IIFE中。通过在一个地方重构数字分配，仍有一些改进要做，但这超出了这个问题的范围。

于 2014-09-12T15:59:51.740 回答