Question

在大多数情况下，我们的应用程序希望Highcharts决定图表的y轴刻度位置。但是，用户可以在创建并显示图表后选择“自定义范围”命令并为y轴指定自定义最小值和最大值。目的：用户可能希望导出与他们制作的其他图表对齐的图表。我已经尝试了包括以下代码在内的许多方法，但是Highcharts继续遵循其自身的min，max和tickInterval偏好（例如，它不遵守{5,25}或{-5,35}。还有我的自定义tickPositioner回调未被调用。

okClicked() {  
    this.axis1.startOnTick = false;
    this.axis1.endOnTick = false;   
    this.axis1.alignTicks = false;
    this.axis1.tickPositioner = this.getCustomTicks.bind(this, this.axis1, this.yMin1, this.yMax1);
    this.axis1.setExtremes(this.yMin1, this.yMax1);
    this.axis1.chart.redraw();
}

Answer 1

您可以在单击按钮后触发chart.update函数，并将轴选项设置为您希望的任何位置：

$('.btn').click(function() {
    Highcharts.each(Highcharts.charts, function(chart, i) {
        chart.yAxis[0].update({
            max: 25,
            min: 5,
            startOnTick: false,
            tickInterval: 5
        });
    });
});

http://jsfiddle.net/BlackLabel/obfudy23/

API参考：https://api.highcharts.com/class-reference/Highcharts.Chart#update

Answer 2

可以通过向html中添加一个简单的输入字段来解决此问题，如下所示：

Min: <input id="min"> <br>
Max: <input id="max">
<button id="update">Update y-axis </button>

然后，我们需要一个可以在单击按钮时激活的功能。在此函数内，我们将更新Highcharts图表。

$('#update').click(function () {
    chart.update({
       yAxis: {
           min: document.getElementById("min").value,
           max: document.getElementById("max").value,
           tickInterval: 5 //do calculations here to get needed tickInterval
       }
    })
});

如此this article所示，它会更改y轴。您可以根据需要扩展更新功能，只需覆盖之前的设置即可，如上面的代码所示。

在旁注中：必须注意，在提琴中，y轴有时会关闭，具体取决于所插入的值。应该动态计算tickInterval才能使它起作用。

图表创建后需要精确设置Highcharts轴的最小值/最大值

2 个答案: