以角度缩放图

Question

我正在开发一个角度应用程序。我需要在我的应用程序中使用图表，为此我在我的应用程序中使用 highcharts 库。我需要一个图表，如附图所示。

此图表的比例范围为 0 到 5，数据使用标志/框绘制

我无法在高位图表网站或任何其他角度库中找到此类图表。我怎么能有这个图表？请帮忙。

Answer 1

您可以使用 Highstock 的旗帜系列。下面的示例还包含标志的防冲突逻辑。

Highcharts.chart('container', {
    chart: {
        ...,
        events: {
            render: function() {
                const points = this.series[0].points;

                points.forEach(function(point, i) {
                    if (points[i + 1] && point.plotX + point.graphic.width > points[i + 1].plotX) {
                        const translateY = point.graphic.translateY - point.graphic.height - 10;

                        points[i + 1].graphic.attr({
                            anchorX: points[i + 1].plotX,
                            anchorY: point.graphic.anchorY + point.graphic.height + 10,
                            translateY: translateY
                        });
                    }
                });
            }
        }
    },
    series: [{
        type: 'flags',
        fillColor: null,
        showInLegend: false,
        colorByPoint: true,
        allowOverlapX: true,
        stackDistance: false,
        data: [{
            x: 1.7,
            title: '1.7'
        }, {
            x: 1.8,
            title: '1.8'
        }, {
            x: 2.1,
            title: '2.1'
        }, {
            x: 2.5,
            title: '2.5'
        }, {
            x: 2.5,
            title: '2.5'
        }],
        shape: 'flag'
    }]
});

---

现场演示： https://jsfiddle.net/BlackLabel/eg0oxr4t/

文档： https://www.highcharts.com/docs/stock/flag-series