chart.js如何在图中添加标签

sg2wtvxw 于 2023-10-18 发布在 Chart.js

关注(0)|答案(1)|浏览(192)

我使用的是chart.js 4.2.1。我正在运行一个Flask服务器，我将散点图data和labels一起发送到网页。labels作为字符串发送，如下所示：['test1', 'test2', 'test3']

const embedding_data = {
        datasets: [
            {
                type: 'line',
                data: [],
                backgroundColor: 'rgb(168, 38, 8)',
                borderColor: 'rgb(168, 38, 8)',
                pointRadius: 0,
                borderWidth: 3,
                order: 2
            },
            {
                type: 'scatter',
                backgroundColor: 'rgb(168, 38, 8)',
                borderColor: 'rgb(168, 38, 8)',
                data: [],
                pointRadius: 3,
                order: 3
            },
            {
                type: 'scatter',
                backgroundColor: 'rgb(46, 179, 84)',
                borderColor: 'rgb(46, 179, 84)',
                data: [],
                pointRadius: 3,
                order: 1
            },
            {
                type: 'scatter',
                labels: {{ labels }},
                backgroundColor: 'rgb(52, 110, 235)',
                borderColor: 'rgb(52, 110, 235)',
                data: {{ data }},
                pointRadius: 1,
                order: 4
            }
        ]
    };
    const config = {
        type: 'scatter',
        data: embedding_data,
        options: {  maintainAspectRatio: true,
                    events: [],
                    aspectRatio: 1,
                    plugins:{
                        legend: {
                            display: false
                        },
                    },
                    scales:{
                        x: {
                            display: false
                        },
                        y: {
                            display: false
                        },
                    }
                 }
    };
    const myChart = new Chart(
        document.getElementById('myChart'),
        config
    );

使用data: {{ data }}没有任何问题，但是当我添加labels: {{ labels }}时，我得到的错误Uncaught SyntaxError: Unexpected token '&'指向我执行labels: {{ labels }}的行。在labels中，我没有任何&。
我使用的标签语法是否有误？

chart.js

来源：https://stackoverflow.com/questions/76842794/chart-js-how-to-add-labels-to-plot

1条答案

按热度按时间

s2j5cfk01#

标签声明中的引号被转义，因此错误消息带有“&”。
要将数据传递给jinja中的JavaScript，我推荐使用tojson过滤器。

<script>
    const data = {
        labels: {{ labels | tojson }},
        datasets: [{
            label: 'My First Dataset',
            data: {{ data | tojson }},
        }],
    };
    const config = {
        type: 'line',
        data: data,
        options: {
            // ...
        }
    };
    const myChart = new Chart(
        document.getElementById('myChart'),
        config
    );
</script>

赞(0）回复(0）举报 2023-10-18

我来回答

chart.js如何在图中添加标签

1条答案

相关问题

热门标签

最新问答