How can I draw a half-circle in Cesium JS?

Question

Cesium has the ability to make circles (such as by creating an Entity with ellipse defined, for one), and arcs (polylines). But I haven't been able to find the way to create partial, filled-in, circles.

We use Cesium to display bar charts and other report details overlaid on a map. We now have a request to display pie charts over the map. To do this, we'd need to be able to create, say, 50%, 30%, 20%, or some other arbitrary percentage of a circle, filled in with a given color. Is there a way to do this in Cesium?

I could just create an arc and two connecting lines, to create a partial circle outline, but I can't find a way to create a partial circle with a fill color (similar to what EllipseGraphics itself allows for.)

Answer 1

As of version 1.62, CesiumJS includes modifications I made to allow drawing partial ellipsoids. You should be able to leverage this to get what you want. For example,

let viewer = new Cesium.Viewer('cesiumContainer');
viewer.entities.add({
    name: 'Pie piece',
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0),
    ellipsoid: {
        radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
        innerRadii: new Cesium.Cartesian3(1, 1, 1),
        minimumClock: Cesium.Math.toRadians(0),
        maximumClock: Cesium.Math.toRadians(270),
        minimumCone : Cesium.Math.toRadians(89.8),
        maximumCone : Cesium.Math.toRadians(90.2),
        material: Cesium.Color.RED,
    }
});