How to set a default selected effect for VChart pie charts?

Problem description

When drawing a pie chart for the first time, I hope to highlight a block. How should I configure it?

Solution

First, you need to set the graphic style in the selected state in the chart spec configuration….


This content originally appeared on DEV Community and was authored by FlyingAndFly

Problem description

When drawing a pie chart for the first time, I hope to highlight a block. How should I configure it?

Solution

  1. First, you need to set the graphic style in the selected state in the chart spec configuration. 
 pie: {
    state: {
      selected: { 
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },
  1. Set the default selected data item through setSelected API 
const vchart = new VChart(spec, { dom });
vchart.renderSync();
vchart.setSelected({
    // one data record
})

Code example 

const spec = {
  type: 'pie',
  data: [
    {
      id: 'id0',
      values: [
        { type: 'oxygen', value: '46.60' },
        { type: 'silicon', value: '27.72' },
        { type: 'aluminum', value: '8.13' },
        { type: 'iron', value: '5' },
        { type: 'calcium', value: '3.63' },
        { type: 'sodium', value: '2.83' },
        { type: 'potassium', value: '2.59' },
        { type: 'others', value: '3.5' }
      ]
    }
  ],
  outerRadius: 0.8,
  innerRadius: 0.5,
  padAngle: 0.6,
  valueField: 'value',
  categoryField: 'type',
  pie: {
    state: {
      selected: {
        outerRadius: 0.85,
        stroke: '#000',
        lineWidth: 1
      }
    }
  },

};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

vchart.setSelected({ type: 'oxygen'})

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Results show

Related Documents


This content originally appeared on DEV Community and was authored by FlyingAndFly


Print Share Comment Cite Upload Translate Updates
APA

FlyingAndFly | Sciencx (2024-06-17T11:16:32+00:00) How to set a default selected effect for VChart pie charts?. Retrieved from https://www.scien.cx/2024/06/17/how-to-set-a-default-selected-effect-for-vchart-pie-charts/

MLA
" » How to set a default selected effect for VChart pie charts?." FlyingAndFly | Sciencx - Monday June 17, 2024, https://www.scien.cx/2024/06/17/how-to-set-a-default-selected-effect-for-vchart-pie-charts/
HARVARD
FlyingAndFly | Sciencx Monday June 17, 2024 » How to set a default selected effect for VChart pie charts?., viewed ,<https://www.scien.cx/2024/06/17/how-to-set-a-default-selected-effect-for-vchart-pie-charts/>
VANCOUVER
FlyingAndFly | Sciencx - » How to set a default selected effect for VChart pie charts?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/17/how-to-set-a-default-selected-effect-for-vchart-pie-charts/
CHICAGO
" » How to set a default selected effect for VChart pie charts?." FlyingAndFly | Sciencx - Accessed . https://www.scien.cx/2024/06/17/how-to-set-a-default-selected-effect-for-vchart-pie-charts/
IEEE
" » How to set a default selected effect for VChart pie charts?." FlyingAndFly | Sciencx [Online]. Available: https://www.scien.cx/2024/06/17/how-to-set-a-default-selected-effect-for-vchart-pie-charts/. [Accessed: ]
rf:citation
» How to set a default selected effect for VChart pie charts? | FlyingAndFly | Sciencx | https://www.scien.cx/2024/06/17/how-to-set-a-default-selected-effect-for-vchart-pie-charts/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts