jqPlot does only work after refreshing page

I want to use jqPlot in addition to jQuery to display charts and so on.

我想在jQuery之外使用jqPlot来显示图表等等。

After adding all files, I run my code, the page is empty. I press refresh, the chart appears.

添加所有文件后,我运行我的代码,页面为空。我按下刷新,图表出现。

I included all files in my <head>:

我在中包含了所有文件:

    <script class="include" type="text/javascript" src="~/Scripts/jqPlot/jquery.jqplot.min.js"></script>
    <script class="include" type="text/javascript" src="~/Scripts/jqPlot/jqplot.pieRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="~/Scripts/jqPlot/jqplot.donutRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="~/Scripts/jqPlot/excanvas.min.js"></script>

along with some js:

以及一些js:

<script>
        $(document).ready(function () {
            var data = [
              ['Heavy Industry', 12], ['Retail', 9], ['Light Industry', 14],
              ['Out of home', 16], ['Commuting', 7], ['Orientation', 9]
            ];
            var plot1 = jQuery.jqplot('chart1', [data],
              {
                  seriesDefaults: {
                      // Make this a pie chart.
                      renderer: jQuery.jqplot.PieRenderer,
                      rendererOptions: {
                          // Put data labels on the pie slices.
                          // By default, labels show the percentage of the slice.
                          showDataLabels: true
                      }
                  },
                  legend: { show: true, location: 'e' }
              }
            );
        });
    </script>

Finally in my <body>:

最后在我的中:

<div id="chart1" style="height:300px; width:500px;"></div>

As far as I understand it, I messed up the order of the files, because they load after refreshing. The chart does NOT appear in IE9, even after refreshing (yes, I included the excanvas.js)

据我了解,我搞砸了文件的顺序,因为它们在刷新后加载。即使在刷新之后,该图表也不会出现在IE9中(是的,我包含了excanvas.js)

Do anyone can help me out?

有人可以帮帮我吗?

Thanks in advance, please let me know if you miss any information.

在此先感谢您,如果您遗漏任何信息,请告诉我。

1 个解决方案

#1

I had the same issue. What i did was create a function that builds my chart, an in the event pageshow draw that.

我遇到过同样的问题。我所做的是创建一个构建我的图表的函数,在事件的页面显示中绘制它。

$(document).on("pageshow", function(){ console.log('pageshow'); doPlot(); });

$(document).on(“pageshow”,function(){console.log('pageshow'); doPlot();});

and my doPlot function was :

我的doPlot功能是:

function doPlot(){
    var arrayValores = [];
    // listaValores is an array that i send as model attribute from backend
    $.each(JSON.parse(listaValores), function(idx, obj) {
        var actual = [obj.fechaAccion, obj.valorAccion]
        arrayValores.push(actual);
    });     
    var plot = $.jqplot('accion-chart', [arrayValores], {
          axes:{
            xaxis:{
              renderer:$.jqplot.DateAxisRenderer, 
              tickOptions:{formatString:'%H:%M'},
            }
          },
          series:[{lineWidth:1, 
                markerOptions: { style:'none', display: 'none' },
                    showMarker:false}],
          seriesColors:["#FF0000"]
      });
      if (plot) {
        plot.destroy();
      }
      plot.replot();

}

I hope it helps. Regards.

我希望它有所帮助。问候。

#1