How to define the shape of the picture?

How to define the shape of the picture?

I need to draw a pie chart with a legend, and I want the legend items to be in the shape of a sector. How can I achieve this? Also, how can I set the position of the legend?

The shape of the legend item can be configured through legends.item.shape.style.symbolType. The content of symbolType can be a vchart built-in shape, such as ‘rect’, ‘circle’, etc. At the same time, users can also set a custom svg path to achieve any shape.

 legends: { visible: true, item: { shape: { style: { symbolType: 'rect' // symbolType: 'M -1 1 L 0 0 L 1 1' } } } }
Enter fullscreen mode
Exit fullscreen mode

The position of the legend is configured by legends.orient , and the optional positions include: left, right, top, bottom:

 legends: { visible: true, orient: 'right' }
Enter fullscreen mode
Exit fullscreen mode
const data = [ { value: 10, category: 'One' }, { value: 9, category: 'Two' }, { value: 6, category: 'Three' }, { value: 5, category: 'Four' }, { value: 4, category: 'Five' }, { value: 3, category: 'Six' }, { value: 1, category: 'Seven' }
];
let totalValue = 0;
data.forEach(obj => (totalValue += obj.value));
const map = {};
data.forEach(obj => { map[obj.category] = `${((obj.value / totalValue) * 100).toFixed(2)}%`;
}); const spec = { type: 'pie', data: [ { id: 'pie', values: data } ], categoryField: 'category', valueField: 'value', legends: { visible: true, orient: 'right', item: { shape: { style: { symbolType: 'rect' } } } }
}; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Enter fullscreen mode
Exit fullscreen mode

Image description


Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Online webbuilders are web based programs that run on the provider's service and offer web hosting as well. The combination of these features makes the galaxy watch 6 an invaluable companion in daily life.