jqPlot：从json定义图表参数

Question

我想弄清楚是否可以从json文件配置图表以及如何去做。

让我们以另一种风格写下句子：我可以使用json文件传递jqPlot数据以绘制图表和图表参数吗？

直到现在我只是用json文件来存储数据。

有什么建议吗？

由于提前， 埃文

Answer 1

可以，这里是使用AJAX调用的例子：

$.ajax({ 
    url: 'input.json', 
    dataType: 'json', 
    success: function(options) 
    {         
     var data = [ 
     [3, 7, 9, 1, 4, 6, 8, 2, 5], 
     [4, 8, 10, 2, 5, 7, 9, 3, 6], 
     [5, 9, 11, 3, 6, 8, 10, 4, 7], 
     [6, 10, 12, 4, 7, 9, 11, 5, 8], 
     [7, 11, 13, 5, 8, 10, 12, 6, 9]]; 

     var plot = $.jqplot('chart', data, options);     
    }, 
    error: function(jqXHR, textStatus, errorThrown) 
    { 
    alert(textStatus) 
    } 
}); 

这里的图表选项是从检索（在这种情况下）本地JSON文件，它看起来是这样的：

{ 
"legend": {   
    "show": true, 
    "placement": "outsideGrid", 
    "location": "s", 
    "rendererOptions": { 
     "numberRows": 1 
    } 
}, 
"seriesDefaults": { 
    "showMarker": false, 
    "fill": false 
}} 

然后该地块照常产生。一个限制（我相信）：如果您想使用自定义渲染器（例如$ .jqplot.DateAxisRenderer），则无法通过JSON指定。

Answer 2

我不知道你们其他人的情况，但我不喜欢这里的回应，并决心做出这项工作。我终于成功了，它可以像“$ .jqplot.DateAxisRenderer”一样工作，没有任何问题。

在我的情况下，我实际上是从CherryPy应用程序传递的东西，我需要能够将选项作为JSON传递给图表的数据。我最终将整个选项集作为字符串传递，然后使用EVAL将其更改回JavaScript代码。一旦我找出它的语法实际上完美的作品。这是使其工作的最佳方式。

1）找出没有使用任何JSON的所有选项，以确保情节实际正常工作。
2）逐字复制jqPlot的options参数。
3）确保在选项周围添加圆括号，以便EVAL将正确评估它，否则您将收到语法错误。
4）将这整个事情变成服务器端的字符串类型对象。
5）然后这将通过JSON.dumps，因为它与其余数据一起返回给客户端。
6）在客户端javascript上只对返回的对象执行EVAL，并将结果设置为您的选项参数。

下面是一个例子：
正如你在这里看到的，我也在调用选项中的数据渲染器。只要这些选项在客户端的适当上下文中被调用，它就会评估所有的变量，等等，并且完美地工作。这是工作在jQuery 1.11.0，与jqPlot 1.0.8r1250。

Server对象：

options = """({ 
     dataRenderer: ajaxDataRenderer, 
     dataRendererOptions: { 
      name: name 
     }, 
     axes:{ 
      xaxis:{ 
       label:xLabel, 
       renderer:$.jqplot.DateAxisRenderer, 
       tickOptions:{formatString:'%R'} 
      }, 
      yaxis:{ 
       tickOptions:{ 
        formatString:'%.0f' 
       } 
      } 
     }, 
     legend: { 
      show: true, 
      placement: 'outsideGrid', 
      labels: seriesLabels, 
      location: 'ne', 
      rowSpacing: '0px' 
     }, 
     highlighter: { 
      show: true, 
      sizeAdjust: 7.5 
     }, 
     cursor: { 
      show: true, 
      zoom:true 
     } 
    })""" 

返回到客户端：

output = json.dumps({ 
        'name': name, 
        'xLabel': header[0], 
        'seriesLabels': header[1:], 
        'parms': parms, 
        'options': options, 
        'parmData': parmData, 
        'successful': True 
        }) 

的Javascript：

var options = eval(incomingData.options); 
var plot = $.jqplot('chart_'+name, "/getChartData", options);