顶点图表轴范围的不同选项

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 }])

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

如果我遗漏了任何内容，请随时指出我的文档，但我搜索了顶点图表方法，唯一看起来很接近这个的东西就是里面

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

重新渲染图表时，是否应该从现有路径中绘制 或从头开始完全重绘图表路径。默认情况下， 图表从现有路径重新渲染

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',
  },
}

---

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

1. 将现有数据改组到原始系列（将series-2 附加到series-1） - 并用新数据覆盖series-2。您无需在chartOptions 中编辑colors。
2. 您可以随机播放颜色。如果您希望所有“旧”数据具有相同的颜色，只需在每次添加新系列时在 colors 数组前面加上您的基本颜色。或者，如果您希望每个系列都有不同的颜色，只需在每次添加新系列时附加一种颜色即可。