将javascript图形应用程序实现到现有管理面板的列表视图中

Question

我想在现有的管理视图中实现一个javascript图形绘图应用程序（即http://people.iola.dk/olau/flot/examples/turning-series.html），其中列表视图中模型的实例也显示这些项目的图表，并且可以通过使用已经实现了我在我的应用程序的admin.py中添加的list_filter选项。

我会很高兴任何方向，示例或已有的教程

干杯。

Answer 1

如果您按照FLOT教程进行操作，那么它们非常完整。

• 包含jQuery
• 包括flot

然后点击examples / API

基本上，您将图表“附加”到容器中......

<div id="myChartGoesHere" style="width:500px;height:250px;"></div>

然后用您想要的数据填充它：

<script>
   //data can be points [ [x1, y1], [x2, y2], ... ]
   var data = [ [3,4], [5,7], [2,9] ]
   //options is an object containing all your desired features
   var options = {
      lines: { show: true },
      points: { show: true }
   };
   var plot = $.plot($('myChartGoesHere'), data, options)
</script>

Answer 2

我会研究django管理模板。 http://www.djangobook.com/en/1.0/chapter17/是一个很好的起点。在页面顶部，对所有数据执行for循环，并将其作为变量打印到javascript中。我希望这可以帮助你朝着正确的方向发展。