如何使用jqplot.canvasAxisTickRenderer在JQplot JavaScript折线图上反转y轴？ [英] How do I invert the y-axis on my JQplot JavaScript line chart using the jqplot.canvasAxisTickRenderer?

问题描述

我无法在我的折线图上反转左侧y轴，这是由jQuery / JQplot脚本生成的。



我有两个独立的JavaScript数组，在两个数组中都有相同的x值（日期）。我的图表有一个y轴和一个y2轴。我想反转y轴，使得较低的值从上到下而不是从下到上。



这是我的代码的片段：< br $>

  var  rsWell2 = ['  3/30/2000'， 74 。 38 ]，['  1/26/2001'， 62 。 23 ]，['  2/15/2002'， 63 。 67  .. 。
  var  rsWell4 = ['  3 / 30/2000'， -  53。 38 ]，['  1/26/2001'， -  41。 23 ]，['  2/15/2002'， -  42。 67 ] ... 
 
 
  var  plot1 = $ .jqplot（ '  chart'，[rsWell2，rsWell4]，{... 
 
 
 xaxis：{
 tickOptions：{
 fontSize：'  9pt'，
 angle：-60 ，
 formatString：' ％D' 
}，
 tickRenderer ：$。jqplot.CanvasAxisTickRenderer，
 
 label：'  Date'，
渲染器：$。jqplot.DateAxisRenderer 
 
 
}，
 
 
 
 yaxis：{
 
 label：' 深度到水位（英尺低于土地）'，
 labelRenderer：$ .jqplot.CanvasAxisLabelRenderer，
 
 rendererOptions：{
 
 tickRenderer：$。jqplot.CanvasAxisTickRenderer}，
 tickOptions：{
 fontSize :. .. 
 formatString：... 
 alignTicks： true  
 
  //   min：Math.max.apply（null，rsWell2）， 
  //   max：Math.min.apply（null，rsWell2） 
 
} 
 
 y2axis：{
 
 tickOptions：{...} 
 
} 

因为我的数组值总是在变化，所以我无法指定最小值和最大值。我尝试了很多不同的方法，现在非常沮丧！我怎么能做到这一点？非常感谢任何帮助。



Liz

解决方案

.jqplot（' chart'，[rsWell2，rsWell4]，{...


xaxis：{
tickOptions：{
fontSize：' 9pt'，
angle ：-60，
formatString：' ％D'
}，
tickRenderer：

.jqplot.CanvasAxisTickRenderer，

label：' 日期'，
渲染器：

.jqplot.DateAxisRenderer


}，



yaxis：{

label：' 深度到水位（英尺低于土地）'，
labelRenderer：

I am having trouble inverting the left-side y-axis on my line chart, which is generated by jQuery/JQplot scripts.

I have two separate JavaScript arrays with identical x values (dates) in both arrays. My chart has a y-axis and a y2axis. I would like to invert the y-axis so that the lower values start from the top down, instead of bottom up.

This is a snippet of my code:

var rsWell2 =['3/30/2000', 74.38], ['1/26/2001', 62.23], ['2/15/2002', 63.67...
var rsWell4 = ['3/30/2000', -53.38], ['1/26/2001', -41.23], ['2/15/2002', -42.67]...


var plot1 = $.jqplot('chart', [rsWell2, rsWell4], { ...


xaxis:{
                        tickOptions:{
                            fontSize: '9pt',
                            angle:-60,
                            formatString:'%D'
                        },
                        tickRenderer:$.jqplot.CanvasAxisTickRenderer,

                        label: 'Date',
                        renderer:$.jqplot.DateAxisRenderer


                    },



yaxis:{

                       label: 'Depth to Water Level (ft below land)',
                       labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                       rendererOptions:{

                           tickRenderer:$.jqplot.CanvasAxisTickRenderer},
                       tickOptions:{
                           fontSize: ...
                           formatString: ...
                           alignTicks: true

                           //min: Math.max.apply(null, rsWell2),
                           //max: Math.min.apply(null, rsWell2)

                       }

y2axis:{
                        
                            tickOptions:{...}
                         
                        }

Because my array values are always changing, I cannot specify a min and max value. I have tried many different ways and am now very frustrated! How can I accomplish this? Any help is greatly appreciated.

Liz

解决方案

.jqplot('chart', [rsWell2, rsWell4], { ... xaxis:{ tickOptions:{ fontSize: '9pt', angle:-60, formatString:'%D' }, tickRenderer:

.jqplot.CanvasAxisTickRenderer, label: 'Date', renderer:

.jqplot.DateAxisRenderer }, yaxis:{ label: 'Depth to Water Level (ft below land)', labelRenderer:

这篇关于如何使用jqplot.canvasAxisTickRenderer在JQplot JavaScript折线图上反转y轴？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！