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

Question

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

对于任何方向、示例或已经存在的教程，我都会非常感激

干杯。

Answer 1

如果您遵循 FLOT 教程，它们将非常完整。

• 包括 jQuery
• 包括浮动

然后只需按照示例/ 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

I would look into django admin templates. http://www.djangobook.com/en/1.0/chapter17/ is a good place to start. At the top of the page, do a for loop over all your data, and print it out as a variable to your javascript. I hope this can help you in the right direction.