Highcharts - 以编程方式“翻转” （反向）Y轴 [英] Highcharts - programmatically "flip" (reverse) Y Axis

问题描述

所有，

我正在使用Highcharts在我正在开发的网络应用程序中。其中一个要求是用户应该能够点击一个按钮并翻转或反转Y轴。换句话说，当用户点击一个按钮时， y轴的值应该从下面的值翻转：

pre $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ c>

至

 在底部最高
  

当您第一次创建图表时 - 可以使用reversed属性y轴：

http：// api.highcharts.com/highcharts#yAxis.reversed

示例： http://jsfiddle.net/ZgVNS/ 然而，如果我尝试使用options对象以编程方式使用JavaScript（例如，在一个按钮点击），它似乎不工作：

  chart.options.yAxis.reversed = ！chart.options.yAxis.reversed; 
 chart.redraw（）; 
  

这是我设置测试的jsfiddle： http://jsfiddle.net/4JZxS/6/

这可能吗？

您可以使用Axis.update（）函数来解决这个问题。 方法：

  $（function（）{
 var chart = new Highcharts.Chart（{
 chart ：{
 renderTo：'container'
}，
 xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May' ，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
 y轴：{
颠倒：false 
}，
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
}] 
））; 
 
 var reversed = chart.options.yAxis.reversed; 
 
 // the按钮（函数（）{
 
 chart.yAxis [0] .update（{
颠倒：！颠倒
 }）; 
 
 reverse =！reversed; 
}）; 
}）; 
  

以下是更新后的JSFiddle：http://jsfiddle.net/4JZxS/15/

All,

I'm using Highcharts in a web app I'm working on. One of the requirements is that users should be able to click a button and "flip" or reverse the Y axis.

In other words - when the user clicks a button - the y Axis values should flip from:

highest at the top / lowest at the bottom

to

lowest at the top / highest at the bottom

When you first create the chart - this is possible using the "reversed" property of the y Axis:

http://api.highcharts.com/highcharts#yAxis.reversed

Example here: http://jsfiddle.net/ZgVNS/

However - if I attempt to do this programmatically with JavaScript using the options object (e.g., on a button click), it doesn't seem to work:

chart.options.yAxis.reversed = !chart.options.yAxis.reversed;
chart.redraw();

Here's a jsfiddle I set up to test: http://jsfiddle.net/4JZxS/6/

Is this possible?

Thanks in advance!

解决方案

You can use the Axis.update() method:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            reversed: false
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
   });

   var reversed = chart.options.yAxis.reversed;

   // the button action
   $('#button').click(function () {

       chart.yAxis[0].update({
           reversed: !reversed
       });  

       reversed = !reversed;
   });
});

Here's the updated JSFiddle: http://jsfiddle.net/4JZxS/15/

这篇关于Highcharts - 以编程方式“翻转” （反向）Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！