Highcharts 区域样条值在 y 轴上的位置不正确答案

【问题标题】：Highcharts area spline values have incorrect position on y-axisHighcharts 区域样条值在 y 轴上的位置不正确
【发布时间】：2015-05-01 05:05:58
【问题描述】：

我有一个区域样条高图，似乎错误地将数据点沿 y 轴放置。我正在使用 angular-highcharts 指令并通过我的服务提供图表选项。数据本身是正确的，标签也是正确的，这些点只是沿 y 轴放置得太高了。请参阅下面的图像和代码：

服务功能：

    function getReportingChart(quarterlyData, chartType, reportingType) {
        // extract top 4 drugs
        var top4 = _.sortBy(quarterlyData, 'x2q2').reverse().slice(0, 4);

        var dataSeries = [];
        var firstDrug = quarterlyData[0];
        var seriesNumber = 0;
        var quarters = ['Q1 2012', 'Q2 2012', 'Q3 2012', 'Q4 2012', 'Q1 2013', 'Q2 2013', 'Q3 2013', 'Q4 2013', 'Q1 2014', 'Q2 2014'];

        _.each(top4, function (drug) {
            var name = drug.A;
            var dataArray = [];

            dataArray.push(drug.x0q1);
            dataArray.push(drug.x0q2);
            dataArray.push(drug.x0q3);
            dataArray.push(drug.x0q4);
            dataArray.push(drug.x1q1);
            dataArray.push(drug.x1q2);
            dataArray.push(drug.x1q3);
            dataArray.push(drug.x1q4);
            dataArray.push(drug.x2q1);
            dataArray.push(drug.x2q2);

            var newDataSet = new buildSeries(name, dataArray, seriesNumber);
            dataSeries.push(newDataSet);
            console.log(newDataSet);

            seriesNumber += 1;
        });

        return {
            options: {
                chart: {
                    type: chartType
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },

            },
            series: dataSeries,
            title: {
                text: 'Top 4 Drugs By ' + annotateChartByType(reportingType).titleSuffix
            },
            credits: {
                enabled: false
            },
            loading: false,
            xAxis: {
                categories: quarters,
                tickmarkPlacement: 'between',
                labels: {},
                min: 0.5,
                max: quarters.length - 1.5,
                startOnTick: false,
                endOnTick: false
            },
            yAxis: {
                title: {
                    text: annotateChartByType(reportingType).yAxis.title
                },
                labels: {
                    format: annotateChartByType(reportingType).yAxis.unitformat
                }
            },
            size: {}
        };


    }

下面是annotateChartByType函数：

    function annotateChartByType(params){
        var defaultOption = {titleSuffix:" Primary Reports", yAxis: {title: "Number of Reports", unitformat: '{value}'}};

        switch (params) {
            case 'ps-cases':
                return defaultOption;
            case 'patients':
                return {titleSuffix:" Patient Incidence Rate",yAxis: {title: "Incidence Rate", unitformat: '{value:,.2f} %'}};
            case 'serious-outcomes':
                return {titleSuffix:" Outcome Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
            case 'serious-adverse-events':
                return {titleSuffix:" Serious AE Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
            default:
                return defaultOption;
        }
    }

【问题讨论】：

只是出于好奇，您是否尝试将另一个数据点放置在渲染不正确的数据点之后？如果它是最后一个数据点，它是否只显示错误？我最近一直在使用 AngularJS 和 Highcharts，并且有一些类似的怪癖。
我不使用 Angular，所以这可能是一个愚蠢的问题。但是，annotateChartByType(reportingType).yAxis.unitformat 是什么样的？
@SmegheadSev 所有点似乎都偏离了相同的数量级，而不仅仅是最后一点。
@BarbaraLaird，这是一个自定义函数，用于生成数据标签的值（在本例中为 25 366）。

标签： javascript angularjs highcharts

【解决方案1】：

这是因为你有：

plotOptions: {
    series: {
        stacking: 'normal'
    }
}

这意味着您看到的值对于蓝色系列确实是正确的，但它叠加在其他三个系列上，这使得它在 y 轴上更高。如果这是无意的，请删除此代码。

如果是有意的，您可以使用formatter 或pointFormat 中的total 值来获取总数而不是系列值。请参阅此pointFormat 示例：

tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b> ({point.total})<br/>'
}

见this JSFiddle demonstration。这是添加括号以显示总数的默认值。

【讨论】：