对于ngx-charts折线图，它显示折线图，但数据点没有点。
如果您将鼠标悬停在数据点上，它会显示一个表示数据品脱的点以及一个标签工具提示。
我喜欢让折线图像这样一直用一个点来显示所有数据点。
关于如何在 ngx-charts 折线图中的数据点显示一个点，我需要您的帮助
这里是 ngx-chart https://github.com/kedmenecr/cinnamon-angular5-with-ngx-charts 的示例
这里是 ngx-chart 库的源代码。 https://github.com/swimlane/ngx-charts
谢谢。
【问题讨论】：
标签： css angular ngx-charts
如果有人仍然需要此功能，我会使用非超级干净的解决方案解决此功能，但到目前为止它没有任何副作用：
在线性图表上绘制点的自定义服务：
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]);
}
}
}
在您的视图初始化和数据设置为图表调用之后：
@ViewChild('chart') chart: any;
ngAfterViewInit() {
this.customLinerChartService.showDots(this.chart);
}
确保在您的图表上有参考：
<ngx-charts-line-chart #chart>
更新
你不能依赖 ng-reflect-fill 类，因为它只是在开发环境中添加的，所以 insted 将你的颜色作为数组提供并根据索引选择它
【讨论】：
这里首先发布的这种更简单的方法也很有效：
https://github.com/swimlane/ngx-charts/issues/462#issuecomment-783237600
我建议首先参考图表，然后循环浏览该系列：
@ViewChild("numberChart", {read: ElementRef, static: false})
numberChartRef: ElementRef;
...
chartRef.nativeElement.querySelectorAll("g.line-series path").forEach((el) => {
el.setAttribute("stroke-width", "10");
el.setAttribute("stroke-linecap", "round");
});
我测试了系列的长度，并且仅在长度为 1 时应用这些更改。此外，如果您不想为所有图表添加额外的粗线，请确保将属性恢复为默认值-
【讨论】：