How to define the shape of the picture?

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 to your email.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

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