angular 中的比例图

Question

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

此图表的刻度范围为 0 到 5，数据使用 flags/boxes

绘制

我无法在 high 图表网站或任何其他 angular 库中找到此类图表。我怎样才能得到这个图表？请帮忙。

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

angular 中的比例图

Scale graph in angular

angular

highcharts

angular9

angular10