如何在 kendo ui 地图中放置饼图而不是标记

Question

我需要使用 kendo 地图 UI 创建一个地图小部件。我必须用这样的饼图替换标记。是否可以使用 kendo 创建地图小部件？？？，如果可能的话，我该怎么做。我不知道怎么做我是 Kendo 的新手。请帮助我...

Answer 1

我找到了解决问题的方法。

第一步：首先创建一个kendo地图

    $("#geoMap").kendoMap({
        renderAs: "canvas",
        center: [39.6924, -97.3370],
        zoom: 4,
        controls: {
            attribution: false,
            navigator: false,
            zoom: false
        },
        layers: [{
            type: "shape",
            dataSource: {
                type: "geojson",
                transport: {
                    read: "/Scripts/kendo/us.geo.json"
                }
            },
            style: {
                stroke: {
                    color: "#A3A396"
                },
                fill: {
                    color: "#E6E6D4"
                }
            }
        }],
        shapeCreated: onShapeCreated,
        reset: reset
    });

创建一个名为onShapeCreated的函数，这个函数会在每次在Kendo地图中创建形状后调用

function onShapeCreated(event)
{
 .......
}

第 2 步：如果你想在一个州上创建地图，那么你需要找到该州的位置，使用下面的函数

function getShapePositions(event)
{
        var result = {};
        var segments = event.shape.segments;
        result.minX = Number.MAX_VALUE;
        result.maxX = Number.MIN_VALUE;

        result.minY = Number.MAX_VALUE;
        result.maxY = Number.MIN_VALUE;
        if (segments) {
            for (var i = 0; i < segments.length; i++) {
                var anchor = segments[i].anchor();
                result.minX = Math.min(result.minX, anchor.x);
                result.maxX = Math.max(result.maxX, anchor.x);

                result.minY = Math.min(result.minY, anchor.y);
                result.maxY = Math.max(result.maxY, anchor.y);
            }
        }

        result.width = result.maxX - result.minX;
        result.height = result.maxY - result.minY;

        return result;

}

第 3 步： 要在地图上创建饼图，首先我们需要创建一个容器 div 并将其附加到地图上，使用以下命令代码

var chartDiv = $("<div id=" + event.shape.dataItem.properties.code + " class='state-code-label'></div>")
                .appendTo(event.sender.scrollElement);

第 4 步创建容器后，使用该容器创建饼图

  function createPieChart(chartDiv)
{
        $(chartDiv).kendoChart({
            renderAs: "canvas",
            title: {
                visible: false
            },
            transitions: false,
            legend: {
                visible: false
            },
            chartArea: {
                height: 100,
                width: 100,
                background: ""
            },
            data: [{
                    category: "Test",
                    value: 53.8,
                    color: "#9de219"
                },{
                    category: "Test1",
                    value: 3.6,
                    color: "#033939"
                }]
            }],
            seriesDefaults: {
                labels: {
                    visible: false
                },
                overLay: {
                    gradient: null
                }
            },
            seriesColors: ["#8F0000", "#CCCCCC"],
            series: [{
                type: "pie",
                field: "Amount",
                categoryField: "Category"
            }],
            tooltip: {
                visible: false
            }
        });
}

第 5 步：最后使用位置对象将图表正确放置在地图上。

    chartDiv.css({
        top: position.minY + position.height / 2 - chartDiv.height() / 2,
        left: position.minX + position.width / 2 - chartDiv.width() / 2
    });

现在 onShapeCreated 函数将如下所示

function onShapeCreated(event)
{
     var position = getShapePositions(event);

        var chartDiv = $("<div id=" + event.shape.dataItem.properties.code + " class='state-code-label'></div>")
                        .appendTo(event.sender.scrollElement);

createPieChart(chartDiv);

        chartDiv.css({
            top: position.minY + position.height / 2 - chartDiv.height() / 2,
            left: position.minX + position.width / 2 - chartDiv.width() / 2
        });

}

如何在 kendo ui 地图中放置饼图而不是标记

How to place pie charts instead of markers in kendo ui maps

html

javascript

kendo-ui