如何在Highchart下正确显示重叠值?

问题描述 投票:0回答:1

我已经实现了大量的代码来显示高图

以下是完整代码

我的JS代码

 const getBenchmarkChartSettings = (model, isEpd) => {

    let isStrScore = model.isStrScore;
    let metricSeries = reorderMetricSeries(model.series.metricSeries);
    let generatedSeries = model.series.generatedSeries;
    let benchmarkSeries = model.series.benchmarkSeries;
    let pitSeries = getPitSeries(model);

    _.forEach(metricSeries, s => { s.color = s.prop ? propColor : metricColor; });
    _.forEach(generatedSeries, s => { s.color = genColor; });
    _.forEach(benchmarkSeries, (s, i) => {
        s.color = colors[i];
        s.type = 'spline';
        if (s.benchmarkLegend && s.benchmarkType) {
            s.name = s.benchmarkLegend;
        }
        _.forEach(s.data, d => {
            d.x = new Date(d.dataDate).getTime();
            d.y = isStrScore ? defaultscores.indexOf(d.value) : parseFloat(d.value);
        });
    });

    _.forEach(metricSeries, e => { e.minPointLength = 6; e.type = 'column'; });
    _.forEach(generatedSeries, e => { e.minPointLength = 6; e.type = 'column'; });

    let seriesRaw = _.union(metricSeries, generatedSeries, benchmarkSeries, pitSeries);
    let series = _.filter(seriesRaw, { 'errorMessage': null });

    let shiftedSeries = _.map(series, ser => _.assign({}, ser, {
        data: _.map(ser.data, d => _.assign({}, d, { x: d.x }))
    }));

    let allDefaultScore = isStrScore && _(shiftedSeries).flatMap('data').flatMap('value').value()
            .every(val => val === 'd');

    _.forEach(shiftedSeries, e => {
        // allow for series longer than 1000 elements
        e.turboThreshold = 0;
        _.forEach(e.data, d => {
            if (!d.isPit) {
                d.x = new Date(d.dataDate).getTime();
                d.y = isStrScore ? 
                    (allDefaultScore ? defaultCompanyScores.indexOf(d.value) : defaultscores.indexOf(d.value)) 
                    : parseFloat(d.value);
            }
        });
    });

    const getShiftedSeries = (shiftedSeries, date) => {
        let maxYear = new Date(date).getFullYear();
        let updatedShiftedSeries = _.map(shiftedSeries, o => {
            if (!o.isPit) {
                let sdata = o.data.filter(itm => new Date(itm.x).getFullYear() >= maxYear);
                o.data = sdata;
                if (sdata.length > 0) { return o; }
                return null;
            }
            return o;
        });
        updatedShiftedSeries = _.without(updatedShiftedSeries, undefined || null);
        return updatedShiftedSeries;
    };

    let maxDate = _.chain(shiftedSeries)
        .map(o => _.maxBy(o.data, 'x'))
        .filter(e => e !== undefined)
        .map('x')
        .max()
        .value();

    if (pitSeries) {
        let pitAdjSeries = _.filter(shiftedSeries, { 'isPit': true });
        pitAdjSeries[0].data[0].x = maxDate;
    }

    let minDate = _.chain(shiftedSeries)
        .map(o => _.minBy(o.data, 'x'))
        .filter(e => e !== undefined)
        .map('x')
        .min()
        .value();

    let dateBuffer = ((maxDate - minDate) * 0.1);
    shiftedSeries = getShiftedSeries(shiftedSeries, minDate);

    let hasOnlyFewStatements = _.filter(shiftedSeries, e => 
                                    (e.name.indexOf('CIQ Data') > -1 || e.name.indexOf('Prop Data') > -1))
                                .reduce((dataPoints, { data }) => dataPoints.concat(data), [])
                                .length < 3;

    let chartSettings = {
        chart: {
            width: 220,
            height: 135,
            spacingLeft: 0,
            marginLeft: !isStrScore ? 25 : 12,
            marginRight: 1,
            backgroundColor: isEpd ? '#f2f2f2' : 'transparent',
            plotBorderColor: '#9A9A9A',
            plotBorderWidth: 1
        },
        title: {
            text: null
        },
        credits: {
            enabled: false
        },
        legend: {
            align: 'left',
            layout: 'horizontal',
            verticalAlign: 'top',
            alignColumns: false,
            itemDistance: 0,
            symbolHeight: 10,
            symbolWidth: 6,
            padding: 0,
            width: 200,
            symbolRadius: 0,
            margin: 7,
            itemMarginTop: 2,
            itemStyle: {
                fontSize: '4px'
            },
            y: -5,
            x: !isStrScore ? 25 : 10
        },
        xAxis: [
            {
                type: 'datetime',
                dateTimeLabelFormats: {
                    millisecond: '%b-%d-%Y',
                    second: '%b-%d-%Y',
                    minute: '%b-%d-%Y',
                    hour: '%b-%d-%Y',
                    day: '%b-%Y',
                    week: '%b-%Y',
                    month: '%b-%d-%Y',
                    year: '%Y'
                },
                labels: {
                    rotation: 0,
                    style: {
                        fontSize: '4px',
                        color: '#000'
                    },
                    y: 7,
                    x: isEpd ? -5 : !isStrScore ? 0 : (hasOnlyFewStatements ? 0 : -10)
                },
                min: minDate - dateBuffer,
                max: maxDate + dateBuffer,
                marginRight: 10,
                gridLineColor: 'white',
                gridLineWidth: 1,
                lineWidth: 0.5,
                minorGridLineWidth: 0,
                lineColor: '#808080',
                minorTickLength: 0,
                tickLength: 0,                
                tickInterval: isEpd ? (364 * 24 * 60 * 60000) : (maxDate - minDate) > 32000000000 ? undefined : 
                        (hasOnlyFewStatements ? undefined : 8000000000),
                align: 'left'
            }
        ],
        yAxis: [
            {
                gridLineWidth: 0,
                lineWidth: 0.5,
                lineColor: '#808080',
                minRange: 0,
                min: 0,
                ceiling: 100,
                tickAmount: isStrScore ? undefined : 5,
                labels: {
                    style: {
                        fontSize: '4px',
                        color: 'black'
                    },
                    x: -2,
                    y: isStrScore ? 7 : 3
                },
                title: {
                    text: !isStrScore ? '(PD%)' : '',
                    align: 'middle',
                    margin: 0,
                    x: -2,
                    rotation: -90,
                    ceiling: 100,
                    style: {
                        fontSize: '5px',
                        color: 'black'
                    },
                    labels: {
                        style: {
                            fontWeight: 'bold',
                            color: 'black',
                            fontSize: '2px'
                        },
                        x: -3
                    }
                }
            }
        ],
        plotOptions: {
            column: {
                maxPointWidth: 10
            },
            series: {
                states: {
                    hover: {
                        enabled: false
                    },
                    inactive: {
                        opacity: 1
                    }
                },
                enableMouseTracking: false,
                borderWidth: 1,
                borderColor: '#FFFFFF',
                threshold: 0,
                lineWidth: 1.5,
                marker: {
                    enabled: false
                },
                minPointLength: 10,
                dataLabels: {
                    enabled: true,
                    style: {
                        fontSize: '4px',
                        color: 'black',
                        textOutline: false
                    },
                    y: isLabelAdjustmentRequired(metricSeries, benchmarkSeries) ? -2 : undefined
                    
                }
            }
        },
        series: shiftedSeries?.map(item => ({
            ...item,
            data: item?.data.sort((a, b) => new Date(a.dataDate || null) - new Date(b.dataDate || null))
        })) || []
    };

    if (isStrScore) {
        chartSettings.yAxis[0].tickInterval = 4;
    }

    _.forEach(chartSettings.series, e => {
        if (e.type === 'column' || e.isPit) {
            e.dataLabels = { 
                padding: 1, 
                allowOverlap:true, 
                format: '<span style=\'font-size:4px;\'>{point.formattedValue}</span>' };
        }
        else if (e.type === 'spline') {
            e.dataLabels = { enabled: false };
        }
    });

    return chartSettings;
    }

enter image description here

下面是代码,使用此代码 higchart 在图表上显示重叠的值

     _.forEach(chartSettings.series, e => {
        if (e.type === 'column' || e.isPit) {
            e.dataLabels = { 
                padding: 1, 
                allowOverlap:true, 
                format: '<span style=\'font-size:4px;\'>{point.formattedValue}</span>'    };
          }
        else if (e.type === 'spline') {
            e.dataLabels = { enabled: false };
        }
      });

如何管理图表下显示的值正确显示,我尝试过执行allowOverlap:false但它隐藏了其中一个值,甚至尝试了很多方法但无法获得正确的结果,例如在图表上以不同的方式显示值。

即使尝试在副驾驶和 ChatGPT 上寻找答案,但仍然没有得到正确的答案,他们要求我做的更改对我没有帮助。

charts highcharts bar-chart
1个回答
0
投票

您可以使用 x 和 y API 选项完全控制数据标签的位置:https://api.highcharts.com/highcharts/series.column.data.dataLabels.x

示例代码设置:

series: [{
    data: [{
        y: 5,
        dataLabels: {
            x: 10,
            y: -10
        }
    }, {
        y: 7,
        dataLabels: {
            x: -10,
            y: 20
        }
    }, {
        y: 3,
        dataLabels: {
            x: 15,
            y: 5
        }
    }]
}],

查看完整演示:https://jsfiddle.net/BlackLabel/gn8tvuhq/

© www.soinside.com 2019 - 2024. All rights reserved.