Почему у меня возникает проблема «ожидается присвоение свойства», когда я хочу отобразить диаграмму на своей веб-странице с использованием высоких диаграмм

Question

У меня есть проблема, когда я хочу отобразить график на своей веб-странице, используя django и highcharts. Это мой файл detail.html.

У меня есть ошибка, называемая назначением свойства, которая указана здесь в моих фигурных скобках:

_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}}';

Без кавычек это интерпретируется как переменная. С кавычками это интерпретируется как строка.