时间戳

首页 > 解决方案 > 基于百分比的高图背景

angular - 基于百分比的高图背景

问题描述

我从 2 天开始使用角离子中的高图尝试这种设计除了价值，什么都没有显示有没有其他选择，或者我们也可以在高位图表中实现它

this.moistureGraphOptions = {
            chart: {
                events: {
                    load: function () {
                        var chart = this,
                            xAxis = chart.xAxis[0],
                            plotLines = xAxis.plotLinesAndBands,
                            newOptions,
                            coordinates = [];

                        plotLines.forEach(function (plot, index) {
                            if (plot.id === 'gradient-plot-line') {
                                var plotLine = plot,
                                    path = plot.svgElem.d.split(' ');

                                coordinates = [
                                    +path[1],
                                    +path[2],
                                    +path[4],
                                    +path[5]
                                ];

                                newOptions = plotLine.options;
                                newOptions.color = {
                                    linearGradient: [0, 0, 0, coordinates[1] + 247],
                                    stops: [
                                        [0, '#F7A35C'],
                                        [1, '#7ACCC8']
                                    ]
                                };
                            }
                            xAxis.removePlotLine('gradient-plot-line');
                        });
                        xAxis.addPlotLine(newOptions);
                    }
                }
            },
            title: {
                text: null
            },
            xAxis: {
                categories: [],
                labels: {
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Helvetica-light'
                    }
                },
                plotLines: [{
                    id: 'gradient-plot-line',
                    width: 400,
                    value: 5.5
                }]
            },
            yAxis: [
                {
                    title: {
                        text: 'Value',
                    },
                },
            ],
            credits: { enabled: false },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
            },
            series: [
                {
                    name: 'Values',
                    yAxis: 0,
                    data: [],
                    color: '#d03c3f'
                }
            ],
            exporting: {
                enabled: false
            },
        };

Highcharts 图像

标签： angularionic-frameworkhighchartsionic4

解决方案

您可以在事件中使用yAxis.plotBands而不是自定义代码。load

    yAxis: [{
        reversed: true,
        title: {
            text: 'Value',
        },
        plotBands: [...]
    }]

现场演示：http: //jsfiddle.net/BlackLabel/qdwp843m/

API 参考： https ://api.highcharts.com/highcharts/yAxis.plotBands

推荐阅读