如何使用html和js添加下拉菜单更改sci图表的主题？

Question

我有一个 XY SciChart.js 图表，我在其中添加了两个带有虚拟数据的折线图。

然后我添加了一个下拉菜单。

如何在visual studio code中使用html css和js添加下拉菜单更改sci图表的主题？

Answer 1

您可以通过调用 sciChartSurface.applyTheme 更新 sciChartSurface 的主题。 这方面的文档在这里

如果您的 select 的 ID 为“主题”：

document.querySelector("#theme").onchange = (ev) => {
  const value = ev.target.value;
  let theme = new SciChart.SciChartJSDarkv2Theme();
  if (value === "Light") {
    theme = new SciChart.SciChartJSLightTheme();
  } else if  (value === "Custom") {
    theme.lineSeriesColor = "red";
    theme.sciChartBackground = `radial-gradient(circle, #615EFF 0%, #C4DFFF 100%)`;
    theme.axisBandsFill = "#AACDFF33";
    theme.tickTextBrush = "#0C0C63";
   }
  sciChartSurface.applyTheme(theme);
}

codepen 上的完整示例