小O地图-（图表）- 制作全国行政区图表

Posted 2023-04-24

参考技术A 小O地图除提供地图数据挖掘及处理功能外，还提供基于互联网地图图表功能，本文介绍如何使用小O地图制作行政区图表，用于展示按行政区划分的统计数据。

小O地图支持全国省、市、区三级行政区图表展示，支持任意选择行政区，支持多种行政区级别混合显示。

操作步骤：

登陆小O地图后，新建任务，选择“地图图表 \ 行政区图 \ 行政区地图” 任务。点击新建。

制作后的图表数据会保存在任务中，下次登陆小O地图，打开对应任务，还可以再次打开对应图表。

在任务面板栏中，选择“生成图表”按钮，在弹出界面中点击“新建”，选择“行政区地图”模板。

在图表设置中，选择行政区设置，设置行政区数据。

在左侧行政区树中选择行政区，点击“加入表格”按钮，选择记录会增加到右侧表格中。

【删除】，可在表格中选择删除的行，点击表格上方的删除按钮即可。

【标注内容】，可以在表格中“标注内容”列，输入行政区对应的统计数据，作为行政区标注文字。

【填充颜色】，设置表格行政区对应填充的颜色，也可以设置透明度，边线宽、颜色等。

设置完毕后，直接关闭窗口，不需要保存，设置过程自动保存。

回到图表设置界面，选择

【标签位置】- 勾选，则支持修改标签显示的位置。

【标签显示】- 勾选，则支持显示标签。

【图表名称】- 设置当前图表在图层列表中显示的名称，不设置则显示默认随机名称。

【追加数据】- 当数据量大于1000条时，可以勾选分页添加数据至图表中，行政区图表暂时用不上，可以不设置。

【展示】- 点击左侧按钮栏 展示 ，地图上则会出现设置的行政区图表。

【调整标签位置】- 在地图上点击行政区，此时，标签会隐藏，再次点击，标签会显示。

【设置地图背景】- 地图提供了多种样式地图，用户可在地图右下角【设置】，打开地图设置面板，修改地图显示样式，使地图图表达到最优效果。

制作后的图表可以截图保存，用于其他PPT等汇报材料中。

将 Thymeleaf 与 Google 图表和 Java 地图一起使用

【中文标题】将 Thymeleaf 与 Google 图表和 Java 地图一起使用

【英文标题】：Using Thymeleaf with Google charts and Java Map

【发布时间】：2018-08-31 01:31:17

【问题描述】：

我在 JavaScript 中制作的 Thymeleaf 块切断了结尾；变量，并抛出一个Uncaught (in promise) SyntaxError: Unexpected token ' in JSON at position 2。

除了数据变量之外，代码确实会按应有的方式进行解析。解析代码：

function drawChart() 

    var jsonData = " 'cols': [" +
        "'id':'','label':'Expense','pattern':'','type':'string'" +
        "'id':'','label':'Amount','pattern':'','type':'number']," +
        "'rows': [";

    var data = 'Expense1': 25.0, 'Expense2': 20.0, 'Expense3': 40.0;
    var end = "]";
    var res = jsonData.concat(data);
    var res = res.concat(end);

    var json = JSON.parse(res);

    var data = new google.visualization.DataTable(json);

    var options = 
        title: 'Data test',
        pieHole: 0.4
    ;

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);

前 Thymeleaf 代码：

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', 'packages': ['corechart']);
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() 

        var jsonData = " 'cols': [" +
            "'id':'','label':'Expense','pattern':'','type':'string'" +
            "'id':'','label':'Amount','pattern':'','type':'number']," +
            "'rows': [";

        var data = /*[[$chart.DataPoints]]*/;
        var end = "]";
        var res = jsonData.concat(data);
        var res = res.concat(end);

        var json = JSON.parse(res);

        var data = new google.visualization.DataTable(json);

        var options = 
            title: /*[[$chart.title]]*/'',
            pieHole: 0.4
        ;

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    
</script>

data var 要么就是现在的样子，要么用 "" 括起来，它会切断结束的分号。如何让 JavaScript 的 Thymeleaf 将数据 var 转换为字符串（同时保持它包含的 ''）？

【问题讨论】：

您使用的是百里香叶 3 吗？打印并验证从 chart.DataPoints

返回的 JOSN

不幸的是，我正在使用 thymeleaf 2。

/*[[$chart.DataPoints]]*/;的输出是什么

'Expense1':25.0,'Expense2':20.0,'Expense3':40.0

你可以试试 var json = JSON.parse(res.replace(/\\/g, ""));

【参考方案1】：

这对你有用吗？我认为您不需要先将数据构建为 JSON 字符串，只需将其创建为 JavaScript 对象即可：

<script type="text/javascript" th:inline="javascript">
    google.charts.load('current', 'packages': ['corechart']);
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() 
        var json = 
            'cols': [
                'id':'', 'label': 'Expense', 'pattern': '', 'type': 'string',
                'id':'', 'label': 'Amount', 'pattern': '', 'type': 'number'
            ],
            rows: []
        ;

        var data = /*[[$chart.DataPoints]]*/ [];
        var rows = [];
        Object.keys(data).forEach(function(key) 
            rows.push(
                "c": [
                    "v": key,       "f": null,
                    "v": data[key], "f": null
                ]
            );
        );

        json['rows'] = rows;

        var data = new google.visualization.DataTable(json);
        var title = /*[[$chart.title]]*/ '';
        var options = 
            title: title,
            pieHole: 0.4
        ;

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
    
</script>

编辑：您可以随意格式化数据...在 JavaScript 中执行此操作非常简单。

【讨论】：

这会渲染图表的标题，但会在图表应显示的位置显示“无数据”，此时正在查看 JSON。

"cols":["id":"","label":"Expense","pattern":"","type":"string","id" :"","label":"Amount","pattern":"","type":"number"],"rows":"Expense1:25,"Expense2":20,"Expense3":40 它确实输出了有效的 JSON，但我认为“行”周围必须有方括号，我觉得它已经接近了。

我将 JSON 更改为硬编码 JSON。有没有办法将 /*[[$chart.DataPoints]]*/ 格式化为如下所示： "c":["v":"Expense1","f":null," v":25,"f":null], "c":["v":"Expense2","f":null,"v":20,"f":null] , "c":["v":"Expense3","f":null,"v":40,"f":null]?