ngx-charts折线图,如何始终显示带点的折线图作为数据点 [英] ngx-charts line chart, how to show the line chart with dot for the data point all the time
问题描述
对于ngx-charts折线图,它显示折线图,但数据点没有点.
如果将鼠标悬停在数据点上,它会在数据点上显示一个点,并带有标签工具提示.
我喜欢这样的折线图,以便始终用点显示所有数据点.
在ngx-charts折线图的数据点上如何显示点时,我需要您的帮助
以下是ngx-chart的示例
定制服务在划线图上绘制点:
从'@ angular/core'导入{可注入};@Injectable()导出类CustomLinerChartService {/***自定义:覆盖SVG以使点始终显示在划线图上*由于ngx图表已不再支持*/showDots(图表){令index = 0;const路径= chart.chartElement.nativeElement.getElementsByClassName(线系列");const color = chart.chartElement.nativeElement.getElementsByClassName(线高亮");对于(让路径的路径){const chrtColor = color [index] .getAttribute('ng-reflect-fill');const pathElement = path.getElementsByTagName('path')[0];const pathAttributes = {'marker-start':`url(#dot $ {index})`,'marker-mid':`url(#dot $ {index})`,'marker-end':`url(#dot $ {index})`};this.createMarker(chart,chrtColor,index);this.setAttributes(pathElement,pathAttributes);索引+ = 1;}}/***创建标记**/createMarker(图表,颜色,索引){const svg = chart.chartElement.nativeElement.getElementsByTagName('svg');var marker = document.createElementNS('http://www.w3.org/2000/svg',标记");var circle = document.createElementNS('http://www.w3.org/2000/svg','圆圈');svg [0] .getElementsByTagName('defs')[0] .append(marker);marker.append(circle);const m = svg [0] .getElementsByTagName('marker')[0];const c = svg [0] .getElementsByTagName('circle')[0];const markerAttributes = {id:`dot $ {index}`,viewBox:'0 0 10 10',refX:5引用:5,markerWidth:5markerHeight:5};const circleAttributes = {cx:5cy:5r:5填色};m.append(圆圈);this.setAttributes(m,markerAttributes);this.setAttributes(c,circleAttributes);}/***设置多个属性*/setAttributes(element,attributes){对于(属性中的const键){element.setAttribute(key,attributes [key]);}}}
,然后在视图初始化之后将数据设置为图表调用:
@ViewChild('chart')图表:任意;ngAfterViewInit(){this.customLinerChartService.showDots(this.chart);}
确保图表上有参考文献:
< ngx-charts-line-chart#chart>
更新
您不能依赖 ng-reflect-fill
类,因为它只是增加了开发的气氛,因此可以提供您的颜色作为数组并基于索引进行选择
for ngx-charts line chart, it show the line chart, but there is no dot for the data point.
If you hover the data point, it show a dot for the data pint and also with a label tooltip.
I like to have the line chart to show all the data point with a dot all the time like this.
I need your help on how to show a dot at the data point in ngx-charts line chart
Here is the sample for ngx-chart https://github.com/kedmenecr/cinnamon-angular5-with-ngx-charts
Here is the source code for ngx-chart libary . https://github.com/swimlane/ngx-charts
thanks.
if anyone still needs this feature I workaround this feature with a non-super clean solution but it works with no side effect so far :
custom service to draw the points over liner chart:
import { Injectable } from '@angular/core';
@Injectable()
export class CustomLinerChartService {
/**
* custom: override SVG to have the dots display all the time over the liner chart
* since it's not supported anymore from ngx chart
*/
showDots(chart) {
let index = 0;
const paths = chart.chartElement.nativeElement.getElementsByClassName(
'line-series'
);
const color = chart.chartElement.nativeElement.getElementsByClassName(
'line-highlight'
);
for (let path of paths) {
const chrtColor = color[index].getAttribute('ng-reflect-fill');
const pathElement = path.getElementsByTagName('path')[0];
const pathAttributes = {
'marker-start': `url(#dot${index})`,
'marker-mid': `url(#dot${index})`,
'marker-end': `url(#dot${index})`
};
this.createMarker(chart, chrtColor, index);
this.setAttributes(pathElement, pathAttributes);
index += 1;
}
}
/**
* create marker
*
*/
createMarker(chart, color, index) {
const svg = chart.chartElement.nativeElement.getElementsByTagName('svg');
var marker = document.createElementNS(
'http://www.w3.org/2000/svg',
'marker'
);
var circle = document.createElementNS(
'http://www.w3.org/2000/svg',
'circle'
);
svg[0].getElementsByTagName('defs')[0].append(marker);
marker.append(circle);
const m = svg[0].getElementsByTagName('marker')[0];
const c = svg[0].getElementsByTagName('circle')[0];
const markerAttributes = {
id: `dot${index}`,
viewBox: '0 0 10 10',
refX: 5,
refY: 5,
markerWidth: 5,
markerHeight: 5
};
const circleAttributes = {
cx: 5,
cy: 5,
r: 5,
fill: color
};
m.append(circle);
this.setAttributes(m, markerAttributes);
this.setAttributes(c, circleAttributes);
}
/**
* set multiple attributes
*/
setAttributes(element, attributes) {
for (const key in attributes) {
element.setAttribute(key, attributes[key]);
}
}
}
and after your view init and the data is set to the chart call :
@ViewChild('chart') chart: any;
ngAfterViewInit() {
this.customLinerChartService.showDots(this.chart);
}
make sure to have the reference on your chart :
<ngx-charts-line-chart #chart>
UPDATE
you can't rely on ng-reflect-fill
class since it just added in development mood so insted provide your colors as array and chose it based on index for example
这篇关于ngx-charts折线图,如何始终显示带点的折线图作为数据点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!