JavaScript

Question

有没有办法在一个字典中显示带有给定源数据集的条形图？我正在使用 ECharts，很难理解他们的文档:(

我的数据：

{"TCP": 1003, "UDP": 232, "ICMP": 4, "IP": 0}

我的选择就在那里：

var option = {
                dataset: {
                    source : myChart
                },
                title: {
                    text: 'Protocol'
                },
                xAxis: {
                    data: ['TCP', 'UDP', 'ICMP', 'IP']
                },
                yAxis: {
                    data: [0, 100, 300, 500, 700, 900, 1100]
                },
                series: [{
                    name: 'Protocol',
                    type: 'bar',
                }]
            };

非常感谢任何建议！

@编辑所以问题出在我的 JavaScript 代码中...我无法访问值，这是什么问题？

const proto = JSON.parse(document.getElementById('proto').textContent);
            console.log(proto);
            console.log(proto['IP']);

我忘了说 proto 元素来自 django 变量

{{ proto|json_script:"proto" }}

@EDIT2 唯一的工作就是把一个带有安全标签的变量，可以吗？或者它可能容易受到 xss 攻击？

var proto = JSON.parse('{{ proto|safe }}');

Answer 1

举个简单的例子，替换数据：https://echarts.apache.org/examples/en/editor.html?c=bar-background

JavaScript - 在ECharts中显示带有字典的条形图

JavaScript - Display a bar graph with dictionary in ECharts

django

protocols

graph

echarts