apexcharts 轴范围的不同选项

Question

简单看一下图表数据：

它有 (x,y) 对：

x	y
0	-3
1	2
2	7
3	8
4	15
5	0

我的想法是创建一个基本的折线图，在我的例子中使用 VueJS，但这个想法可以推广到 JavaScript。

我有一个 series 对象数组，其中每个对象都有 x 和 y 坐标：

series = [
  {
    x: 0,
    y: -3
  },
  {
    x: 1,
    y: 2
  },
  ...
]

这个系列是 options 对象的一部分：

const options = { 
  chart: {
    type: 'line'
  },
  series: series 
}

const chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

并呈现图表。现在，假设我想将数据附加到该图表 - 添加 2 个新的 (x,y) 对

const newData = [
  {
    x: 6,
    y: 20
  },
  {
    x: 7,
    y: -10
  }
]

chart.appendData([{ data: chartData }])

我还希望新添加的数据具有不同的颜色、填充或其他内容 - 因此新添加的数据显示与旧数据不同。

如果我遗漏了任何内容，请随时指出我的文档，但我通过顶点图表方法进行了搜索，唯一看起来与此相近的是内部

updateOptions() 方法，redrawPath 标志（updateOptions docs:

When the chart is re-rendered, should it draw from the existing paths or completely redraw the chart paths from the beginning. By default, the chart is re-rendered from the existing paths

Answer 1

为了给新数据设置不同的样式，您需要使用 appendSeries 方法将这些数据点放入不同的系列：

const newData = [
  {
    x: 6,
    y: 20
  },
  {
    x: 7,
    y: -10
  }
]

chart.appendSeries({
  name: "series-2", // optional
  data: newData
})

ApexCharts 中的大部分样式都是基于系列完成的（更具体地说 seriesIndex）。因此，通过将新数据放在一个单独的系列中，您将能够使用数组来设置第二个系列的样式，例如 colors.

您可以使用您提到的 updateOptions 方法指定在追加新数据系列时要使用的颜色，也可以提前指定。

chartOptions: {
  colors: ["#546E7A", "#E91E63"],
}

使用“Numeric paired values in XY properties”时，xaxis 类型也必须明确设置为数字：

chartOptions: {
  xaxis: {
    type: 'numeric',
  },
}

当您想要第二次（或第三次，更多次）添加更多数据时，棘手的一点就来了。我在这里可以想到两种方法：

将现有数据随机排列到原始系列（将 series-2 附加到 series-1）- 并用新数据覆盖 series-2。您不需要编辑 chartOptions.

colors

您可以随意调整颜色。如果您希望所有“旧”数据都具有相同的颜色，只需在每次添加新系列时在 colors 数组前加上您的基色即可。或者，如果您希望每个系列都有不同的颜色，只需在每次添加新系列时添加一种颜色即可。

apexcharts 轴范围的不同选项

apexcharts different options for axis range

javascript

charts

apexcharts