ngx-charts：select 条形图上的数据并通过代码更改颜色

Question

我正在使用 ngx-charts for the firs time and I am creating a ngx-charts-bar-vertical 图表。

我已经成功创建了图表，但我想知道是否可以 select 一个柱状图 name 值。

特别是，我的数据如下：

[
  {
    name: '2020-01-01',
    value: 13
  },
  {
    name: '2020-01-02',
    value: 27
  }
]

我想知道是否可以通过 name select 一个特定的栏并更改其颜色以使其更加突出。

我的想法是，因为在我的应用程序中有一个日期选择器，我想使用 selected 日期在图表中突出显示该日期的值。

我看到垂直条形图有几个关联的事件（如 select、激活），但我似乎无法理解这些是否对我的需要有用。

另外，如果这是相关的，我可以在我的应用程序中使用不同类型的日期，所以如果字符串不是最好的，我可以根据需要轻松地使用 JavaScript Date 对象（尽管我在垂直条形图文档中没有看到任何与 time 相关的选项，但我在 line chart 中看到了它。

Answer 1

这是我的做法。我使用 vertical-bar-chart 的 customColors 属性根据其中一个标签的值设置条形的颜色。

基本上，我所做的是在我的图表 class ts 文件中定义一个 customColors 属性，并将其添加到 html 中，然后我可以根据我想要的值更改它的颜色。

因为我的值是日期，所以我可以这样做：

this.getTime().subscribe(time => {
  this.customColors = [
    {
        name: time.format('YYYY-MM-DD'),
        value: '#ff0000' // RED FOR THIS DATE ONLY
    }
  ];
});

在我的应用程序中，this.getTime() 将日期选择器中的当前时间显示为 Observable<moment.Moment>，我可以使用此 moment 日期对象来格式化它在图表到“select”我的栏并更改其颜色。

ngx-charts：select 条形图上的数据并通过代码更改颜色

ngx-charts: select data on bar chart and change color via code

javascript

angular

charts

ngx-charts