We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
1.3.3
null
const goldenMedals = { 2000: [ { country: 'USA', value: 37 }, { country: 'Russia', value: 32 }, { country: 'China', value: 28 }, { country: 'Australia', value: 16 }, { country: 'Germany', value: 13 }, { country: 'France', value: 13 }, { country: 'Italy', value: 13 }, { country: 'Netherlands', value: 12 }, { country: 'Cuba', value: 11 }, { country: 'U.K.', value: 11 } ], 2004: [ { country: 'USA', value: 36 }, { country: 'China', value: 32 }, { country: 'Russia', value: 28 }, { country: 'Australia', value: 17 }, { country: 'Japan', value: 16 }, { country: 'Germany', value: 13 }, { country: 'France', value: 11 }, { country: 'Italy', value: 10 }, { country: 'South Korea', value: 9 }, { country: 'U.K.', value: 9 } ], 2008: [ { country: 'China', value: 48 }, { country: 'USA', value: 36 }, { country: 'Russia', value: 24 }, { country: 'U.K.', value: 19 }, { country: 'Germany', value: 16 }, { country: 'Australia', value: 14 }, { country: 'South Korea', value: 13 }, { country: 'Japan', value: 9 }, { country: 'Italy', value: 8 }, { country: 'France', value: 7 } ], 2012: [ { country: 'USA', value: 46 }, { country: 'China', value: 39 }, { country: 'U.K.', value: 29 }, { country: 'Russia', value: 19 }, { country: 'South Korea', value: 13 }, { country: 'Germany', value: 11 }, { country: 'France', value: 11 }, { country: 'Australia', value: 8 }, { country: 'Italy', value: 8 }, { country: 'Hungary', value: 8 } ], 2016: [ { country: 'USA', value: 46 }, { country: 'U.K.', value: 27 }, { country: 'China', value: 26 }, { country: 'Russia', value: 19 }, { country: 'Germany', value: 17 }, { country: 'Japan', value: 12 }, { country: 'France', value: 10 }, { country: 'South Korea', value: 9 }, { country: 'Italy', value: 8 }, { country: 'Australia', value: 8 } ], 2020: [ { country: 'USA', value: 39 }, { country: 'China', value: 38 }, { country: 'Japan', value: 27 }, { country: 'U.K.', value: 22 }, { country: 'Russian Olympic Committee', value: 20 }, { country: 'Australia', value: 17 }, { country: 'Netherlands', value: 10 }, { country: 'France', value: 10 }, { country: 'Germany', value: 10 }, { country: 'Italy', value: 10 } ] }; const colors = { China: '#d62728', USA: '#1664FF', Russia: '#B2CFFF', 'U.K.': '#1AC6FF', Australia: '#94EFFF', Japan: '#FF8A00', Cuba: '#FFCE7A', Germany: '#3CC780', France: '#B9EDCD', Italy: '#7442D4', 'South Korea': '#DDC5FA', 'Russian Olympic Committee': '#B2CFFF', Netherlands: '#FFC400', Hungary: '#FAE878' }; const dataSpecs = Object.keys(goldenMedals).map(year => { return { data: [ { id: 'id', values: goldenMedals[year] .sort((a, b) => b.value - a.value) .map(v => { return { ...v, fill: colors[v.country] }; }) }, { id: 'year', values: [{ year }] } ] }; }); const duration = 2000; const spec = { type: 'bar', padding: { top: 12, right: 100, bottom: 12 }, data: dataSpecs[0].data, direction: 'horizontal', yField: 'country', xField: 'value', seriesField: 'country', bar: { style: { fill: datum => datum.fill } }, axes: [ { animation: true, orient: 'bottom', type: 'linear', visible: true, grid: { visible: true } }, { animation: true, id: 'axis-left', orient: 'left', width: 130, tick: { visible: false }, label: { visible: true }, type: 'band' } ], title: { visible: true, text: 'Top 10 Olympic Gold Medals by Country Since 2000' }, animationUpdate: { bar: [ { type: 'update', options: { excludeChannels: ['x', 'y'] }, duration }, { channel: ['x', 'y'], options: { excludeChannels: ['width'] }, duration: 500 } ], axis: { duration: 500, easing: 'linear' } }, customMark: [ { type: 'text', dataId: 'year', style: { textBaseline: 'bottom', fontSize: 200, textAlign: 'right', fontFamily: 'PingFang SC', fontWeight: 600, text: datum => datum.year, x: () => { return vchart.getChart().getCanvasRect()?.width - 50; }, y: () => { return vchart.getChart().getCanvasRect()?.height - 50; }, fill: 'grey', fillOpacity: 0.5 } } ], player: { type: 'continuous', orient: 'bottom', auto: true, loop: true, dx: 80, position: 'middle', interval: duration, specs: dataSpecs, slider: { railStyle: { height: 6 } }, controller: { backward: { style: { size: 12 } }, forward: { style: { size: 12 } }, start: { order: 1, position: 'end' } } } }; const vchart = new VChart(spec, { dom: document.getElementById('chart') as HTMLElement, mode: isMobile ? 'mobile-browser' : 'desktop-browser'}); vchart.renderAsync() setTimeout(() => { vchart.updateSpec({ ...spec, player: { ...spec.player, slider: { visible: false, railStyle: { height: 6 } }, controller: { visible: false, backward: { style: { size: 12 } }, forward: { style: { size: 12 } }, start: { order: 1, position: 'end' } } } }) }, 1000) setTimeout(() => { vchart.updateSpec({ ...spec, player: { ...spec.player, slider: { railStyle: { height: 6 } }, controller: { backward: { style: { size: 12 } }, forward: { style: { size: 12 } }, start: { order: 1, position: 'end' } } } }) }, 2000) // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart;
there is no error
- OS: - Browser: - Framework:
No response
The text was updated successfully, but these errors were encountered:
fix: fix the error triggered by chart updateSpec, fixed #988, #1002
912a325
3ffc0a5
Successfully merging a pull request may close this issue.
Version
1.3.3
Link to Minimal Reproduction
null
Steps to Reproduce
Current Behavior
Expected Behavior
there is no error
Environment
Any additional comments?
No response
The text was updated successfully, but these errors were encountered: