javascript - 仅显示第一个自定义标签。海图

问题描述

我的程序中有一个非常奇怪的错误，我现在暂时无法破解。基本上我使用的是 Highcharts.js，当我尝试使用在格式化程序中解析的自定义标签制作一个简单的折线图时，它只显示第一个自定义标签，即数组。我使用的第一个图表库是谷歌图表，我遇到了完全相同的问题。我从服务器获取的数据是完全正确的，并使用 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 的第一个标签）：

这就是代码，如果您需要更多信息，请随时询问。控制台中没有显示任何错误。先感谢您。

标签： javascriptjqueryhighcharts

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

计算你的标准偏差
设置这些值的数组以用作您的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/

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

javascript - 仅显示第一个自定义标签。海图

问题描述

解决方案

推荐阅读