Struts 2 jquery 图表用本地数据加载图表数据

Question

我想用本地数据加载图表数据。

 <sjc:chart
       id="chartPlaceHolder"
       cssStyle="width: 600px; height: 400px;"
       pie="true"
       pieLabel="true"
       dataType="local"        
   />

然后我用了（Refresh/Reload Flot In Javascript中提到的）

//This data is created dynamically from a grid when grid completed 
var chartData= [
                { label: "Chrome",  data: 36.3, color: "#89A54E"},
                { label: "Other",  data: 0.8, color: "#3D96AE"}
            ];
var plot = $.plot($('#chartPlaceHolder'));
    plot.setData(chartData);
    plot.setupGrid();
    plot.draw();

我在 jquery API

中得到一些 jquery 异常 aB is undefined

有意见吗？！

Answer 1

您缺少 $.plot() 的两个附加参数。

你应该阅读 basic usage。

Create a placeholder div to put the graph in:
<div id="placeholder"></div>
You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:
<div id="placeholder" style="width:600px;height:300px"></div>
You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).

Then when the div is ready in the DOM, which is usually on document ready, run the plot function:
$.plot($("#placeholder"), data, options);
Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the API reference. Here's a quick example that'll draw a line from (0, 0) to (1, 1):
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });

编辑：

您可以试试下面的代码。在没有数据的情况下创建图表后，它正在用数据重新加载图表。

<sjc:chart
    id="placeholder"
    cssStyle="width: 600px; height: 400px;"
    pie="true"
    pieLabel="true">
</sjc:chart>
<script>
  $(function(){
    var chartData= [
      { label: "Chrome",  data: 36.3, color: "#89A54E"},
      { label: "Other",  data: 0.8, color: "#3D96AE"}
    ];
    var series =  { pie: { show: true }};
    var o = {};
    o.data = chartData;
    o.series= series;
    $.struts2_jquery_chart.chart($("#placeholder"), o);
  });
</script>

Struts 2 jquery 图表用本地数据加载图表数据

Struts 2 jquery chart load chart data with local data

jquery

struts2

flot

struts2-jquery-plugin

struts2-jquery-chart