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

Question

我第一次使用ngx-charts ，我正在创建一个ngx-charts-bar-vertical图表。

我已成功创建图表，但我想知道是否可以通过name值选择其中一个条形。

特别是，我的数据如下所示：

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

我想知道是否可以按name选择特定的栏并更改其颜色以使其更加突出。

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

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

此外，如果这是相关的，我可以在我的应用程序中使用不同类型的日期，所以如果字符串都没有，可以很容易地我用JavaScript工作的最佳Date ，如果需要的对象（虽然我没有看到任何time在产权相关选项垂直条形图文档，但我在line chart看到它）。

Answer 1

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

基本上，我所做的是在我的图表类 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日期对象来格式化它在图表中的格式以“选择”我的条形图和改变它的颜色。