Question

我的程序中有一个非常奇怪的错误，我暂时无法破解。基本上，我使用的是Highcharts.js，当我尝试使用格式化程序中解析的自定义标签制作简单的折线图时，它仅显示第一个自定义标签即数组。我使用的第一个图表库是Google图表，在那里我遇到了完全相同的问题。我从服务器获取的数据是完全正确的，并已用Postman测试了错误。这是负责创建图表的代码。

$("#table tbody").on('click', 'tr', function () {
    var data = table.row(this).data();

    $(".diagrams-row").html('<div class="loader"></div><span class="loading-label">Generating diagrams for a pair of stocks: ' + data[0] + '</span>');

    $.ajax({
        url: "/api/generateDiagrams?name=" + data[0] + "&periods=" + getParameterByName("periods"),
        method: "GET",
        success: function (result) {
            $(".diagrams-row").html('');

            $(".diagrams-row").append(
                $("<div/>")
                    .attr("id", "chart_div")
            );

            var myLabels = [result.average - result.standartDeviation * 3,
            result.average - result.standartDeviation * 2,
            result.average - result.standartDeviation,
            result.average,
            result.average + result.standartDeviation,
            result.average + result.standartDeviation * 2,
            result.average + result.standartDeviation * 3];

            $(function () {
                var myChart = Highcharts.chart('chart_div', {
                    title: {
                        text: 'Solar Employment Growth by Sector, 2010-2016'
                    },
                    subtitle: {
                        text: 'Source: thesolarfoundation.com'
                    },
                    yAxis: {
                        title: {
                            text: 'Number of Employees'
                        },
                        labels: {
                            formatter: function () {
                                return myLabels[this.value];
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle'
                    },
                    plotOptions: {
                        series: {
                            label: {
                                connectorAllowed: false
                            },
                            pointStart: 2010
                        }
                    },
                    series: [{
                        name: 'Installation',
                        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
                    }, {
                        name: 'Manufacturing',
                        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                    }, {
                        name: 'Sales & Distribution',
                        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                    }, {
                        name: 'Project Development',
                        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                    }, {
                        name: 'Other',
                        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                    }],
                    responsive: {
                        rules: [{
                            condition: {
                                maxWidth: 500
                            },
                            chartOptions: {
                                legend: {
                                    layout: 'horizontal',
                                    align: 'center',
                                    verticalAlign: 'bottom'
                                }
                            }
                        }]
                    }
                });
            });
        }
    });
});

以下是发生的情况的图像（您可以看到它仅显示yAxis的第一个标签）：

如果您需要任何其他信息，可以随时使用该代码。控制台中没有显示任何错误。预先谢谢你。

Answer 1

我会这样处理（如我上面的评论中所述）：

计算标准差
设置这些值的数组以用作您的tickPositions值
构建这些值的键对象以及所需的相应标签值

设置看起来像这样：

tickPositions = [-67982,-33176,1629,36435,71241,106046,140852,175658],
myLabels = {};

myLabels[-67982]='-3';
myLabels[-33176]='-2';
myLabels[1629]='-1';
myLabels[36435]='Mean';
myLabels[71241]='+1';
myLabels[106046]='+2';
myLabels[140852]='+3';
myLabels[175658]='+4';

结果看起来像这样：

提琴：http://jsfiddle.net/jlbriggs/u4293Lv0/

在我的示例中，我将带有更新标签的轴作为辅助轴，但是显然，您可以根据需要进行设置。

Answer 2

@daniel_s的评论之一是正确的。事实证明，我只是要使用yAxis.tickPositioner函数：

$(function () {
                            var myChart = Highcharts.chart('chart_div', {
                                title: {
                                    text: 'Solar Employment Growth by Sector, 2010-2016'
                                },
                                subtitle: {
                                    text: 'Source: thesolarfoundation.com'
                                },
                                yAxis: {
                                    title: {
                                        text: 'Number of Employees'
                                    },
                                    labels: {
                                        format: '{value:.2f}'
                                    },
                                    tickPositioner: function () {
                                        var positions = [result.average - result.standartDeviation * 3,
                                        result.average - result.standartDeviation * 2,
                                        result.average - result.standartDeviation,
                                        result.average,
                                        result.average + result.standartDeviation,
                                        result.average + result.standartDeviation * 2,
                                        result.average + result.standartDeviation * 3];
                                        return positions;
                                    }
                                },
                                legend: {
                                    layout: 'vertical',
                                    align: 'right',
                                    verticalAlign: 'middle'
                                },
                                plotOptions: {
                                    series: {
                                        label: {
                                            connectorAllowed: false
                                        },
                                        pointStart: 2010
                                    }
                                },
                                series: [{
                                    name: 'Installation',
                                    data: [0, -1, 1, 4, 97031, 119931, 137133, 154175]
                                }, {
                                    name: 'Manufacturing',
                                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                                }, {
                                    name: 'Sales & Distribution',
                                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                                }, {
                                    name: 'Project Development',
                                    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                                }, {
                                    name: 'Other',
                                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                                }],
                                responsive: {
                                    rules: [{
                                        condition: {
                                            maxWidth: 500
                                        },
                                        chartOptions: {
                                            legend: {
                                                layout: 'horizontal',
                                                align: 'center',
                                                verticalAlign: 'bottom'
                                            }
                                        }
                                    }]
                                }
                            });
                        });

这是图表的正确显示。

仅显示第一个自定义标签。高图

2 个答案: