Question

我有一个脚本可以生成多个图表，这些图表会传递到我的chart.html中的datachart变量。我希望每个图表都有自己的<div>。迭代datachart并创建所需的<div>数量非常容易，但我面临的问题是datachart中的图表数量会有所不同。在下面的示例中，生成了12个图表，我必须手动传递datachart|loadchart:"p1,p2,..."。

有没有办法迭代图表或根据datachart|loadchart:"p1,p2,..."数组的长度动态构建datachart？

来自chart.html模板的片段

<head>
    <!-- code to include the highcharts and jQuery libraries goes here -->
    <!-- load_charts filter takes a comma-separated list of id's where -->
    <!-- the charts need to be rendered to                             -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="/highcharts.js" type="text/javascript"></script>

    {% load chartit %}
    {{ datachart|load_charts:"p1,p2,p3,p4,p5,p6,p7,p8,p9,p10,p11,p12" }}

</head>

<center>
    {% for c in datachart %}
      <div id='p{{forloop.counter}}' style="height: 40%; width: 80%">  </div>
    {% endfor %}
</center>

views.py

views.py附加到charts变量。 charts最终包含图表对象[<chartit.charts.Chart object at 0x000001B3ECA44F60>, <chartit.charts.Chart object at 0x000001B3ECA6F0F0>,...]

def getSurfData(request,pk, project_id, house_id, stage_id):
    client = Client.objects.get(pk=pk)
    project = Project.objects.filter(clients=client, pk=project_id).get()
    house = house.objects.filter(project=project, pk=house_id).get()

    stages = Stage.objects.get(house=house, pk=stage_id)

    pprop_type = PerfProperty.objects.filter(perf__in = stages.perf_set.all()).values('prop_type').distinct()

    for p in pprop_type:
        seriesOpt = []
        chartOpt = []
        for pNum in stages.perf_set.all():
            exp = PerfProperty.objects.filter(perf=pNum, prop_type=p['prop_type']).values('perf__perf_number','prop_type','time','value')
            options = {'options': {
                        'source':  exp,
                            },
                        'terms': [{'pt':'prop_type','t{}'.format(pNum):'time','Number {}'.format(pNum):'value'}]

                        }

            seriesOpt.append(options)

            options = {'options': {
                          'type': 'line',
                          },
                        'terms': {'t{}'.format(pNum): ['Number {}'.format(pNum)]}}
            chartOpt.append(options)

            dp = DataPool (series = seriesOpt)

            cht = Chart(
                    datasource = dp,
                    series_options = chartOpt,

                    chart_options =
                      {'title': {
                           'text': "{}".format(p['prop_type'])
                               },
                       'xAxis': {
#                            'categories':{'t{}'.format(pNum)},
                            'crosshair':'true',
                            'labels': {
                                'format': '{value}'
                        },
                            'title': {
                               'text':'Time'},
                            },
                        'yAxis':{
                            'title': {
                                'text': "Value"}

                                },
                        'chart': {
                            'zoomType': 'x',
                                },

                            })
        charts.append(cht)

#   
    return render(request,'reporter/chart.html',{'datachart': charts, 'client': client, 'projects': project, 'house': house, 'stage':stages})

Answer 1

这是我提出的解决方案。我尝试循环遍历datachart，但我相信chartit总是将js varialbe命名为同一个东西，唯一显示的图表是最后一个。为了解决这个问题，我创建了一个自定义标记，生成一个包含所有div id的字符串，然后传递给load_charts。

自定义标记createDivId位于：

<强>应用程序名称/ templatetags / appname_extras.py

from django import template

register = template.Library()

@register.filter
def createDivId(prefix, length):
    for n in range(len(length)):
        if n ==0:
            tmp = str(prefix)+str(n+1)
        else:
            tmp = str(tmp)+","+str(prefix)+str(n+1)
    print(tmp)
    return str(tmp)

charts.html

<head>
    <!-- code to include the highcharts and jQuery libraries goes here -->
    <!-- load_charts filter takes a comma-separated list of id's where -->
    <!-- the charts need to be rendered to                             -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
    <script src="/highcharts.js" type="text/javascript"></script>

    {% with divID="p"|createDivId:datachart %}
      {% load chartit %}
      {{ datachart|load_charts:divID}}
    {% endwith %}
</head>

<center>
    {% for c in datachart %}
        <div id='p{{forloop.counter}}' style="height: 40%; width: 80%"></div>
    {% endfor %}

</center>

使用Django Chartit加载未知的图表数量

1 个答案: