使用Django和Highcharts动态更改图表数据？

Question

我如何允许用户更改图表的状态并在页面上更新？

例如，允许用户调整图表的大小而无需重新发布。

我在Django中使用High chart，我想到的就是这个。发送所有数据，并设置默认大小，以便显示某些内容。然后添加一个下拉列表或允许用户增加图形大小的内容。当用户选择其中一个时，我会以某种方式对数据进行切片以增加大小。

例如，列表L = [1,2,3,4,5,6,7,8,9,10]被发送，但默认大小为5.因此仅显示L [：5]。用户选择大小为6，因此重新加载以显示L [：6]。

示例图：

以下是基于班级视图的代码段。用户搜索他/她想要分析的reddit用户 - ＆gt;收集数据，发生有趣的事情并设置所有图表 - ＆gt;

def post(self, request): 
   ...

   top_chart_series = collected user data, ready to be parsed in JS. 
   # currently I am only sending over the default size of data (top 10 words)
   # but what I would like to do is send ALL of the data and then deal with it in JS. 
   return render(request, <htmlpage.html>, .... lots of variables, {'top_chart_series': top_chart_series...}) 


.... to the JS 
# So this is where I am a bit confused.
# At this point, the page is being loaded and the charts are being set up via JS: 
# My question then, is how can I allow the user to adjust the size of the graph without having
# to rePOST? 
# I lack JS knowledge so that is probably why I am so confused in how I can approach this.

# Anyway, what I was thinking was, once ALL the data is sent, I first chart a graph
# with the default size (10 words), and then if the user decides to adjust the data
# I run the function again(?) with the selected size. 
# Here is the JS that I use currently, I haven't implemented anything I have described.


            function top_words(target, title, categories, data){
            // The parameters are variables sent in by django
            // E.g., top_words('#top_chart', 'Top Words', '{{ top_chart_series.categories|safe }}','{{ top_chart_series.data|safe }}');
            var seriesOptions = JSON.parse(data);
            var categories = JSON.parse(categories);

            $(target).highcharts({
                chart: {
                    type: 'bar'
                },
                title: {
                    text: null
                },
                xAxis: {
                    title: {
                        text: null
                    },
                    categories: categories
                },
                yAxis: {
                    title: {
                    text: 'Occurence'
                    }
                },
                exporting: {
                            enabled: false
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    bar: {
                        showInLegend: false 
                    }
                },

                series: seriesOptions
            }
        );