Рисование целевой линии (plotLine) на графике Kendo Angular P ie

Question

Можно ли нарисовать целевую линию на графике p ie?

Например, цель - 90%, но установлено - 70%, а не установлено - 30%. Мне нужно показать цель пунктирной линией, как показано на изображении ниже.

Answer 1

Вы можете использовать событие рендеринга сетки, чтобы нарисовать пунктирную линию на графике. Я бы использовал визуальное свойство серии, чтобы получить центральную точку и радиус p ie, а затем в рендере нарисуйте путь от центра p ie под правильным углом.

РАБОЧАЯ ДЕМО

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);
    }
});