Question

我正在使用chart.js绘制折线图，我在尝试创建选项以打印图例时遇到错误"TemplateSyntaxError: tag name expected"。我已将选项定义为

var cOpts = { legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
}
var myLineChart = new Chart(buyers).Line(data,cOpts);

这是否因为jinja2不喜欢＆＃34; {＆＃34;或＆＃34;}＆＃34;在模板文件中？我尝试使用plain＆＃34;＆＃34;创建一个静态文本。这也无济于事。

Answer 1

问题在于其控制结构中的jinja2特定约定{%和%}。为避免解析问题，您必须在每个\和%之前添加{}以防止出现这些问题。

所以在你的具体案例中：

var cOpts = { legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++)\{\%><li><span style=\"background-color:<%=datasets[i].lineColor%>\"></span><%if(datasets[i].label)\{\%><%=datasets[i].label%><\%\}%></li><\%\}%></ul>"}

var myLineChart = new Chart(buyers).Line(data,cOpts);

Answer 2

我无法找到解决使用选项的实际问题的正确解决方案，但是通过使用ul / li创建图例并为每个li定义样式来解决它。

<style>
                #line-Legend
                {
                    list-style: none;
                    padding: 5px;
                    margin-left: 5px;
                    margin-top: 5px;
                    background-color: #ffffff;
                    text-align: left
                }
                #line-Legend li
                {
                    height: 1.2em;
                    padding-left: 15px;
                    margin-bottom: 4px;
                    list-style: none;
                    spanrow=2;
                }
                .legCat
                {
                    display: block;
                    padding-left: 1px;
                    background-color: #ffffff;
                }
                .leg4
                {
                    background-color: #ffee00;
                }
                .leg3
                {
                    background-color: #ff0000;
                }
                .leg2
                {
                    background-color: #0000ff;
                }
                .leg1
                {
                    background-color: #00ff00;
                }
                </style>
                <div> 
                    <ul id="line-Legend">
                        <li class="leg1"><span class="legCat">Legend 1</span></li>
                        <li class="leg2"><span class="legCat">Legend 2</span></li>
                        <li class="leg3"><span class="legCat">Legend 3</span></li>
                        <li class="leg4"><span class="legCat">Legend 4</span></li>
                    </ul>
                </div>

TemplateSyntaxError：期望的标记名称

2 个答案: