当我想使用 highcharts 在我的网页上显示图表时，为什么会出现“property assigment expected”的问题

Question

当我想使用 django 和 highcharts 在我的网页上显示图表时遇到问题。这是我的 detail.html 文件。

我的大括号旁边有一个名为 property assignment expected 的错误：

_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};

这里是所有文件

<h1>{{property.name}}</h1>
<h2>{{roomtype.name}}</h2>

<div id="container"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>



<script>
_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};

Highcharts.chart('container', {

    title: {
        text: 'Pricing model prevision'
    },

    xAxis: {
        categories: _dateList
    },
    yAxis: [{
        title: {
            text: 'Price',
            style: {
                color: Highcharts.getOptions().colors[2]
            }

        },
        labels: {
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        }

    }, {
        title:{
            text:'Occupancy',
            style:{
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels:{
            style:{
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'price',
        data: _price
    }, {
        name: 'availabilty',
        data: _availability
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
</script>

<ul>
    {% for day in dayList %}
        {% if day.availability.room %}
            <li>{{day.date}}:{{day.allotment}}:{{day.pricing.room.actual_rate.amount}} </li>
        {% else %}
            <li>{{day.date}}:0 </li>
        {% endif %}
    {% endfor %}
</ul>

你能帮我解决这个问题吗？ 感谢您的帮助， 最佳

Answer 1

如果加引号，如下图，应该可以：

_dateList='{{dateList|safe}}';

不带引号，解释为变量。带引号，解释为字符串。

Answer 2

我怀疑您是否仍在寻找解决方案，但我也为此苦苦挣扎，并且已根据我自己的问题向我提供了解决方案，所以如果您想要它，请在这里。我在这里引用它，以便您可以看到回答此问题的人，但这是解决方案：

代替：

const jsArrayOfItems = {{ content|tojson }};

使用：

const jsArrayOfItems = JSON.parse('{{ content|tojson|safe }}');

如果有人也被困在这个问题上，希望它会有所帮助。