Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/design-patterns/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ngx图表:选择条形图上的数据并通过代码更改颜色_Javascript_Angular_Charts_Ngx Charts - Fatal编程技术网

Javascript ngx图表:选择条形图上的数据并通过代码更改颜色

Javascript ngx图表:选择条形图上的数据并通过代码更改颜色,javascript,angular,charts,ngx-charts,Javascript,Angular,Charts,Ngx Charts,我第一次使用,我正在创建一个图表 我已经成功地创建了图表,但我想知道是否可以通过名称值选择一个条形图 特别是,我的数据如下所示: [ { name: '2020-01-01', value: 13 }, { name: '2020-01-02', value: 27 } ] 我想知道是否可以通过name选择一个特定的条,并更改其颜色以使其更加突出 我的想法是,因为在我的应用程序中有一个日期选择器,所以我想使用选定的日期在图表中突出显示该日期的值

我第一次使用,我正在创建一个图表

我已经成功地创建了图表,但我想知道是否可以通过
名称
值选择一个条形图

特别是,我的数据如下所示:

[
  {
    name: '2020-01-01',
    value: 13
  },
  {
    name: '2020-01-02',
    value: 27
  }
]
我想知道是否可以通过
name
选择一个特定的条,并更改其颜色以使其更加突出

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

我看到垂直条形图有几个相关的事件(如选择、激活),但我似乎无法理解这些事件是否对我所需要的有用


此外,如果这是相关的,我可以在我的应用程序中使用不同类型的日期,因此如果字符串不是最好的,我可以根据需要轻松地使用JavaScript
Date
对象(虽然我在垂直条形图文档中没有看到任何与时间相关的选项,但我在其中一个中看到了该选项)。

我就是这样做的。我使用了
垂直条形图的
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()
将日期选择器中的当前时间作为可观察的
提供给我,我可以使用此
时刻
日期对象在图表中的格式来“选择”我的条形图并更改其颜色