如何更正Highcharts中的鼠标事件 [英] How to correct mouse event in Highcharts

问题描述

我试图绘制xy线，其中y轴被反转，我得到的情节，但鼠标事件我无法纠正它，它显示反向事件，并且我想自动找到分钟和轴的混合，这可以做到这一点？以及如何将x轴放在最上面？

这是我的代码：

JS < $ {

  $（function（）{
 var chart = new Highcharts.Chart（{
 chart ：{
 renderTo：'container'，
 zoomType：'xy'，
 marginLeft：50，
 marginBottom：90 
}，
 
 //如何获得minmax自动缩放是一个问题
 //反向为真
 yAxis：{
反转：true，
 min：0，max：50 
 $，
 plotOptions：{
 series：{
 stacking：'normal'
} 
}，
 
系列：[
 {
名称：'01 -Jan-2014'，
数据：[[30,0]，[28,10]] 
} 
] 
 }）; 
}）; 
  

HTML

 < script src =http://code.highcharts.com/highcharts.js>< / script> 
< div id =containerstyle =height：400px>< / div> 
  

这是 JS Fiddle 。

是否可以在系列中传递字符串？可能是我的问题很傻请告诉我它是否可能，如下所示我有兴趣

  string mystring ={
名称：'01 -Jan-2014'，
数据：[[28,10]，[30,0]] 
}，
 {
名称：'01  - 2014年1月'，
数据：[[28,10]，[30,0]] 
}
  

在下面的代码中，我想要做的一部分代码如下所示：

 系列：[
 
 
 
 
 
 
这个数组的预期输出，排序后的y轴 GOOD PATTERN  - 小提琴但是鼠标移动不起作用 
 
 
 数据：[
 [25.290,1.000]，
 [25.240,2.000]，
 [25.210,3.000]，
 [25.190,4.000]，
 [25.180,5.000]，
 [25.170,6.000]，
 [25.160,7.000 ]，
 [25.310,8.000]，
 [25.210,9.000]，
 [25.170,10.000]，
 [25.160,11.000]，
 [25.160,12.000 ]，
 [25.150,13.000]，
] 
  
 - 鼠标事件是正常的，但情节模式（线）不是我期待的那种  p> 
 
 
 数据：[
 [25.150,13.000]，
 [25.160,12.000]，
 [ 25.160,11.000]，
 [25.160,7.000]，
 [25.170,6.000]，
 [25.170,10.000]，
 [25.180,5.000]，
 [ 25.140,4.000]，
 [25.210,9.000]，
 [25.210,3.000]，
 [25.240,2.000]，
 [25.290,1.000]，
 [ 25.310,8.000]，
] 
  
 
 
解决方案
 ：
 
 
 
 
在JS控制台中有错误 - 修复它们（按x值排序数据！）
 
 
设置最小和最大值，只是不设置任何值，Highcharts会计算极值
 
 
在顶部显示xAxis，将设置为相反：true  
 
 
 
 
 
演示： http://jsfiddle.net/2xLvY/1/  
  var chart = new Highcharts.Chart（{
 chart：{
 renderTo：'container'，
 zoomType：'xy '，
 marginLeft：50，
 marginBottom：90 
}，
 
 yAxis：{
倒转：true，
 // min： 0，
 //最大值：50 
}，
 plotOptions：{
系列：{
堆栈：'正常'
} 
} ，
 xAxis：{
相反：真
}，
系列：[{
 name：'01 -Jan-2014'，
 data：[ 
 //注意：正确的订单，第一个x值低于第二个
 [28，10]，
 [30，0] 
] 
}] 
}）; 
  
 
I am trying to plot xy line in which y axis is reversed and I am getting plot but mouse event I am unable to correct it it is showing reverse event, and I want to find min and mix of axis automatically how this can be done? And how to bring x axis on top?

This is my code:

JS
$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'xy',
        marginLeft: 50,
        marginBottom: 90
    },

   // How to get minmax automatically zooming is a issue
   // reverse is true
    yAxis: {
        reversed: true,
        min:0,max:50
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },

   series: [
           {
                   name: '01-Jan-2014',
                   data: [[30,0],[28,10]]
           }
           ]
});
});
HTML 
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <div id="container" style="height: 400px"></div>
Here is a JS Fiddle.

Whether its possible to pass string inside series ? may be my question is silly please tell me whether its possible, like below I am interested
   string mystring = "{
                 name: '01-Jan-2014',
                 data: [[28, 10],[30, 0]]
               },
               {
                 name: '01-Jan-2014',
                 data: [[28, 10],[30, 0]]
               }"
In series part of code I would like to do like below
                 series: [ 
                             mystring
                         ]
Expected output from this array, sorted y axis GOOD PATTERN - Fiddle but mouse movement is not working
data:[
[ 25.290,1.000 ],
[ 25.240,2.000 ],
[ 25.210,3.000 ],
[ 25.190,4.000 ],
[ 25.180,5.000 ],
[ 25.170,6.000 ],
[ 25.160,7.000 ],
[ 25.310,8.000 ],
[ 25.210,9.000 ],
[ 25.170,10.000 ],
[ 25.160,11.000 ],
[ 25.160,12.000 ],
[ 25.150,13.000 ],
  ]
here I sorted xaxis - mouse event is alright but plot pattern (line) is not the one which  I expect BAD PATTERN - Fiddle
   data:[
[ 25.150,13.000 ],
[ 25.160,12.000 ],
[ 25.160,11.000 ],
[ 25.160,7.000 ],
[ 25.170,6.000 ],
[ 25.170,10.000 ],
[ 25.180,5.000 ],
[ 25.190,4.000 ],
[ 25.210,9.000 ],
[ 25.210,3.000 ],
[ 25.240,2.000 ],
[ 25.290,1.000 ],
[ 25.310,8.000 ],
  ]

解决方案
Answers:


you have errors in JS console - fix them (sort data ascending by x-value!)
to set min and max, just don't set anything, Highcharts will calculate extremes
to display xAxis on top, set opposite: true


Demo: http://jsfiddle.net/2xLvY/1/
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        zoomType: 'xy',
        marginLeft: 50,
        marginBottom: 90
    },

    yAxis: {
        reversed: true,
        //min: 0,
        //max: 50
    },
    plotOptions: {
        series: {
            stacking: 'normal'
        }
    },
    xAxis: {
        opposite: true  
    },
    series: [{
        name: '01-Jan-2014',
        data: [
            // NOTE: proper order, first x-value is lower that second
            [28, 10],
            [30, 0]
        ]
    }]
});


                        
这篇关于如何更正Highcharts中的鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！