Highcharts。Django 不会加载。 Highcharts 与 Django

Question

有一个很棒的 js 库 - Highcharts。我试图将它链接到 Django，并且一切正常，但当我尝试将包含内容的变量插入数据时却不行。 这是代码。

这个 function 返回我在 Highcharts 中替换的数据。

def get_series(context):
    data_ser = []

for i in context:
    if i in ['One', "Two", "Three", "Four", "Five"]:
        data_ser.append({
            'name': i,
            'y': context[i],
            'z': 22.2
        })

data_ser = json.dumps(data_ser)

return data_ser

这是 jquery 代码本身：

<script>
    $(document).ready(function () {
    
        var data_ser = '{{ data_ser|safe }}'
        console.log(data_ser)
    
        Highcharts.chart('container', {
            chart: {
                type: 'variablepie'
            },
            title: {
                text: 'Stats'
            },
            series: [{
                minPointSize: 10,
                innerSize: '20%',
                zMin: 0,
                name: 'countries',
                data: data_ser
            }]
        });
    })
</script>

在数据系列中，我尝试用 data_ser 代替，但图形不是 output。虽然，如果您手动编写，那么一切都会起作用。

类似的代码工作：

<script>
    $(document).ready(function () {
    
        var data_ser = '{{ data_ser|safe }}'
        console.log(data_ser)
    
        Highcharts.chart('container', {
            chart: {
                type: 'variablepie'
            },
            title: {
                text: 'Stats'
            },
            series: [{
                minPointSize: 10,
                innerSize: '20%',
                zMin: 0,
                name: 'countries',
                data: [
                    {
                        "name": "One",
                        "y": 50.0,
                        "z": 22.2
                    }]
            }]
        });
    })
</script>

我真的希望得到帮助。 或者至少提供带有图表的替代 js 库，这将在其中起作用。

Answer 1

看起来问题在于data_ser是一个表示 JavaScript object 的字符串，但它在 object 系列的数据属性中被视为一个字符串。尝试使用：

<script>
   ...
   var data_ser = JSON.parse('{{ data_ser|safe }}')
   ...
</script>