VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
1.01k stars 72 forks source link

[Bug] previous theme affect later theme #3365

Closed purpose233 closed 1 week ago

purpose233 commented 3 weeks ago

Version

1.12.7

Link to Minimal Reproduction

null

Steps to Reproduce

const spec = {
  type: 'bar',
  data: [
    {
      id: 'barData',
      values: [
        { type: 'Autocracies', year: '1930', value: 129 },
        { type: 'Autocracies', year: '1940', value: 133 },
        { type: 'Autocracies', year: '1950', value: 130 },
        { type: 'Autocracies', year: '1960', value: 126 },
        { type: 'Autocracies', year: '1970', value: 117 },
        { type: 'Autocracies', year: '1980', value: 114 },
        { type: 'Autocracies', year: '1990', value: 111 },
        { type: 'Autocracies', year: '2000', value: 89 },
        { type: 'Autocracies', year: '2010', value: 80 },
        { type: 'Autocracies', year: '2018', value: 80 },
        { type: 'Democracies', year: '1930', value: 22 },
        { type: 'Democracies', year: '1940', value: 13 },
        { type: 'Democracies', year: '1950', value: 25 },
        { type: 'Democracies', year: '1960', value: 29 },
        { type: 'Democracies', year: '1970', value: 38 },
        { type: 'Democracies', year: '1980', value: 41 },
        { type: 'Democracies', year: '1990', value: 57 },
        { type: 'Democracies', year: '2000', value: 87 },
        { type: 'Democracies', year: '2010', value: 98 },
        { type: 'Democracies', year: '2018', value: 99 }
      ]
    }
  ],
  xField: ['year', 'type'],
  yField: 'value',
  seriesField: 'type',
  legends: {
    visible: true,
    orient: 'top',
    position: 'start'
  }
};

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

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

const theme0 = {
      colorScheme: {
        default: [
          '#5383F4',
          '#7BCF8E',
          '#FF9D2C',
          '#FFDB26',
          '#7568D9',
          '#80D8FB',
          '#1857A3',
          '#CAB0E8',
          '#FF8867',
          '#B9E493',
          '#2CB4A8',
          '#B9E4E3'
        ]
      },
      series: {
        bar: {
          barMaxWidth: 15,
          label: {
            visible: true,
            position: 'top',
            formatMethod: text => text + '%'
          }
        }
      },
      component: {
        axis: {
          label: {
            style: { fontFamily: 'Times New Roman' }
          }
        }
      },
      markByName: {
        bar: {
          style: {
            cornerRadius: 15
          }
        }
      }
};

const theme1 = {
      colorScheme: {
        default: ['#1857A3', '#CAB0E8', '#FF8867', '#B9E493', '#2CB4A8', '#B9E4E3']
      }
};

VChart.ThemeManager.registerTheme('theme0', theme0);
VChart.ThemeManager.setCurrentTheme('theme0');

setTimeout(() => {
  VChart.ThemeManager.registerTheme('theme1', theme1);
  VChart.ThemeManager.setCurrentTheme('theme1');
}, 1000);

Current Behavior

previous theme affect later theme.

Expected Behavior

no effect.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

xiaoluoHe commented 1 week ago

related #3372 类似问题, updateSpec 的副作用,建议重新创建图表实例渲染