剑道角饼图上的绘制目标线（plotLine）

Question

是否可以在饼图上绘制目标线？

例如，目标是90％，但已安装是70％，未安装是30％。我需要将目标显示为虚线，如下图所示。

Answer 1

您可以使用网格的render event在图表上绘制虚线。我将使用该系列的视觉属性来获取饼图的中心点和半径，然后在渲染中以正确的角度从饼图中心绘制一条路径。

WORKING DEMO

var center;
var radius;
$("#chart").kendoChart({
    theme: "Bootstrap",
    legend: {visible: true,position: "bottom"},
    seriesDefaults: { labels: {visible: false, }},
    series: [{
        type: "pie",
        data: [{
            category: "Installed",value: 45,color: "#52B84D"
        }, {
            category: "Not Installed",value: 25,color: "#E64F49"
        }],
        visual: function(e) {
          //use this function to get the center and radius 
          //for use in the render function
          center = e.center;
          radius = e.radius;
          // return the default visual element
          return e.createVisual();
        },
    }],
    render: function(e){
        var draw = kendo.drawing;
        var geom = kendo.geometry;
        var chart = e.sender;

        //angle is 90% of 270 because 0 is horizontal
        var cornerRad = (0.9 * 270) * Math.PI / 180;
        var nx = Math.cos(cornerRad)*radius + center.x;
        var ny = Math.sin(cornerRad)*radius + center.y;

        // The center and radius are populated by now.
        var path = new draw.Path({
        stroke: {
          color: "#000",
          width: 2,
          dashType: "dash"
        }
        });                  
        path.moveTo(center).lineTo(nx, ny, 0).close();
        // Draw it on the Chart drawing surface
        chart.surface.draw(path);
    }
});