从django中的列表中的项目中删除引号以获取highcharts

时间:2020-12-27 21:42:56

I'm writing a django web app and I use highcharts for printing graphs. I have to use some tricks to actually make it work in django but there is something I just can't figure out.

我正在写一个django web应用程序,我使用highcharts打印图形。我必须使用一些技巧才能让它在django中运行,但有些东西我无法弄明白。

Take a look here:

看看这里:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-symbols/

There is a sun and cloud for highest and lowest temperature. I'd like to make something similar.

最高温度和最低温度都有太阳和云。我想做类似的事情。

My views.py looks something like this:

我的views.py看起来像这样:

# load data to variable last_day_data

class Chartdata(object):
    def load_last_day():
        values = Temperature.objects.raw('SELECT...')
        for x in values:
            last_day_data['avg_temperature'].append(round(x.avg_temperature,2))
            last_day_data['date'].append('%s:00' % x.id)
    return last_day_data

# set-up highcharts variables and pass to home.html

def home(request):
    last_day_data = Chartdata.load_last_day()

    chart3 = {"renderTo": 'chart_3', "type": 'line', "height": 300,}
    title3 = {"text": 'Last 24 Hours Temperature'}
    xAxis3 = {"title": {"text": 'Date'}, "categories": last_day_data['date'], "reversed": 'true'}
    yAxis3 = {"title": {"text": 'Temperature [°C]'}}
    series3 = [{"name": 'Temperature [°C]', "data": last_day_data['avg_temperature']}]

    chart = {
    'chartID3': 'chart_3',
    'chart3': chart3,
    'series3': series3,
    'title3': title3,
    'xAxis3': xAxis3,
    'yAxis3': yAxis3
    }

    return render(request, 'home.html', chart)

And quick look at home.html (actually only part of it responsible for mapping passed data to highchart variables):

快速查看home.html(实际上只有一部分负责将传递的数据映射到highchart变量):

<script>
$(document).ready(function() {
$({{ chartID3|safe }}).highcharts({
    chart: {{ chart3|safe }},
    title: {{ title3|safe }},
    xAxis: {{ xAxis3|safe }},
    yAxis: {{ yAxis3|safe }},
    series: {{ series3|safe }}
});
});
</script>

Right now, after loading my website, code above ('series' exactly) looks like this:

现在,加载我的网站后,上面的代码('系列'完全)看起来像这样:

series: [{'name': 'Temperature [°C]', 'data': [12.0, 13.11, 14.59, 14.6, 14.36, 14.09, 13.73....]}]

What I have to do: find highest value and replace it with (according to jsfiddle):

我需要做的是:找到最高值并替换为(根据jsfiddle):

{{y: highest_value, marker: {symbol: 'url(sun url)'}}

Finding highest value is easy, let say I have it stored in 'value' under 'index' so I do:

找到最高价值很容易,假设我将它存储在'index'下的'value'中,所以我这样做:

last_day_data['avg_temperature'][index] = "{y: %s, marker: {symbol: 'url(sun url)'}}" % value

But graph isn't displaying correctly and looking at site source:

但图表无法正确显示并查看网站来源:

 series: [{'name': 'Temperature [°C]', 'data': [12.0, 13.11, 14.59, "{y: 14.6, marker: {symbol: 'url(sun url)'}}", 14.36, 14.09, 13.73, 13.29, 12.86, 12.82.... ]}]

Conclusion: it's not working with quotes and I have no idea how to get rid of them. Any ideas how to do it quick, easy and painlessly?

结论:它不使用引号,我不知道如何摆脱它们。任何想法如何快速,轻松,轻松地完成?

1 个解决方案

#1


1  

Finally figured it out, changed it to:

终于想通了,把它改成了:

last_day_data['avg_temperature'][index_max] = "{\"y\": %s, \"marker\":" \
                                               " {\"symbol\": \"url(%ssun.png)\"}" \
                                                  "}" % (value_max, settings.STATIC_URL)

And inside home.html:

在home.html里面:

var series = {{ series3|safe }};
var obj = series[0]['data'];

for(var x in obj){
 if(typeof obj[x] === "string") obj[x] = JSON.parse(obj[x]);
}
series[0]['data'] = obj;
$({{ chartID3|safe }}).highcharts({
    chart: {{ chart3|safe }},
    title: {{ title3|safe }},
    xAxis: {{ xAxis3|safe }},
    yAxis: {{ yAxis3|safe }},
    series: series
});

Now it works perfectly!

现在它完美无缺!

#1


1  

Finally figured it out, changed it to:

终于想通了,把它改成了:

last_day_data['avg_temperature'][index_max] = "{\"y\": %s, \"marker\":" \
                                               " {\"symbol\": \"url(%ssun.png)\"}" \
                                                  "}" % (value_max, settings.STATIC_URL)

And inside home.html:

在home.html里面:

var series = {{ series3|safe }};
var obj = series[0]['data'];

for(var x in obj){
 if(typeof obj[x] === "string") obj[x] = JSON.parse(obj[x]);
}
series[0]['data'] = obj;
$({{ chartID3|safe }}).highcharts({
    chart: {{ chart3|safe }},
    title: {{ title3|safe }},
    xAxis: {{ xAxis3|safe }},
    yAxis: {{ yAxis3|safe }},
    series: series
});

Now it works perfectly!

现在它完美无缺!