Question

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

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

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

以及一些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>

最后在我的<body>：

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

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

有人可以帮助我吗？

提前致谢，如果您遗漏了任何信息，请告诉我。

Answer 1

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

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

我的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();

}

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

jqPlot仅在刷新页面后才起作用

1 个答案: