我想建立一个折线图,将所有高于某个值的点标记为红色,所有低于该值的点标记为蓝色。我试着用ngx-chart这样做,但没有成功。我如何用ng 2-chart这样做?这甚至是可能的吗?任何帮助都将非常感谢。
3pmvbmvn1#
您可以将dataset上的选项pointBackgroundColor定义为每个点的颜色数组。为此,您可以按如下方式使用Array.map():
dataset
pointBackgroundColor
Array.map()
pointBackgroundColor: this.data.map(v => v > 60 ? "red" : "blue"),
这基本上是为大于60的值绘制红色点,否则绘制蓝色点。请看一下这个CodeSandbox,看看它是如何工作的。
raogr8fs2#
于飞:
x1a0b1x
技术支持:
import { Component, ViewChild, OnInit } from '@angular/core'; import { ChartConfiguration, ChartType } from 'chart.js'; import { BaseChartDirective } from 'ng2-charts'; export class MyChartComponent implements OnInit { @ViewChild(BaseChartDirective) chart?: BaseChartDirective; constructor() {} ngOnInit(): void {} public chartData: ChartConfiguration['data'] = { datasets: [ { data: [10, 32, 21, 48], label: 'My Data', backgroundColor: 'rgba(54, 162, 235, 0.2)', borderColor: 'rgba(54, 162, 235, 1)', pointBackgroundColor: 'rgba(54, 162, 235, 1)', pointBorderColor: 'rgba(255, 255, 255, 1)', pointHoverBackgroundColor: 'rgba(255, 255, 255, 1)', pointHoverBorderColor: 'rgba(54, 162, 235, 1)', fill: 'origin', }, ], labels: ['A', 'B', 'C', 'D'] }; public chartOptions: ChartConfiguration['options'] = { elements: { line: { tension: 0.5 } }, scales: { x: {}, y: { position: 'left', beginAtZero: true, grid: { color: 'rgba(100, 100, 100, 0.3)', }, ticks: { color: '#666' } }, }, maintainAspectRatio: false, plugins: { legend: { display: true }, } }; public chartType: ChartType = 'line'; }
您只需将这些示例颜色更改为自己的颜色。
2条答案
按热度按时间3pmvbmvn1#
您可以将
dataset
上的选项pointBackgroundColor
定义为每个点的颜色数组。为此,您可以按如下方式使用Array.map()
:这基本上是为大于60的值绘制红色点,否则绘制蓝色点。
请看一下这个CodeSandbox,看看它是如何工作的。
raogr8fs2#
于飞:
技术支持:
您只需将这些示例颜色更改为自己的颜色。