ngx- chart折线图，如何始终为数据点显示带点的折线图

Question

对于ngx- chart折线图，它显示的是折线图，但数据点没有点。

​

如果将鼠标悬停在数据点上，它会显示一个圆点表示数据小数点，还会显示一个标签工具提示。

​

​

我喜欢用折线图来显示所有的数据点，就像这样。

​

​

我需要你的帮助如何显示一个点在数据点在ngx图表折线图

以下是ngx- https://github.com/kedmenecr/cinnamon-angular5-with-ngx-charts的示例

这是ngx-chart库的源代码。https://github.com/swimlane/ngx-charts

谢谢。

Answer 1

如果任何人仍然需要这个功能，我用一个非超级干净的解决方案来解决这个功能，但到目前为止它还没有副作用：

​

​

在直线图上绘制点数的自定义服务：

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类，因为它只是在开发过程中添加的，所以实例提供您的颜色作为数组，并根据索引进行选择，例如

Answer 2

这里首先发布的这个更简单的方法也很好用：

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的情况下应用这些更改。此外，如果您不希望所有图表都使用额外的粗线，请确保将属性恢复为默认值-