如何纠正 Highcharts 中的鼠标事件

2024-05-27

我正在尝试绘制 xy 线,其中 y 轴反转,并且我得到了图,但是mouse event我无法纠正它,它显示反向事件,我想自动找到轴的最小值和混合,如何做到这一点?以及如何将 x 轴置于顶部?

这是我的代码:

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>

这里有一个JSFiddle http://jsfiddle.net/2xLvY/.

是否可以在系列内部传递字符串?可能我的问题很愚蠢请告诉我是否可能,如下所示我很感兴趣

   string mystring = "{
                 name: '01-Jan-2014',
                 data: [[28, 10],[30, 0]]
               },
               {
                 name: '01-Jan-2014',
                 data: [[28, 10],[30, 0]]
               }"

在代码的系列部分我想做如下

                 series: [ 
                             mystring
                         ]

该数组的预期输出,已排序 y 轴好模式 - 小提琴 http://jsfiddle.net/F5NK8/但鼠标移动不起作用

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 ],
  ]

在这里我对 xaxis - 鼠标事件进行了排序,但是绘图模式(线条)不是我所期望的坏模式 - 小提琴 http://jsfiddle.net/b8FYH/

   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:

  • JS 控制台中有错误 - 修复它们(按 x 值升序对数据进行排序!)
  • 设置最小值和最大值,只需不要设置任何内容,Highcharts 将计算极值
  • 要在顶部显示 xAxis,请设置opposite: true

Demo: http://jsfiddle.net/2xLvY/1/ 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]
        ]
    }]
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何纠正 Highcharts 中的鼠标事件 的相关文章

随机推荐

  • PHP 生成的 XML 显示无效的 Char 值 27 消息

    我使用 PHP 库生成 XML 如下所示 dom new DOMDocument 1 0 utf 8 执行上述操作会生成一个页面 该页面在输出顶部显示一条消息 此页面包含以下错误 第 16 行第 274505 列错误 PCDATA 无效 C
  • 是否存在可以保证哈希算法唯一的情况?

    如果我使用字节大小大于数据 例如 sha 256 的哈希算法对大小受限的类似数据 例如社会安全号码 进行哈希处理 哈希是否能保证与数据具有相同级别的唯一性 原始数据 哈希冲突的概率与输入字符串的大小无关 除非它指示需要多少个输入来保持唯一性
  • 超大图像缩小后变得模糊

    这是我第一次尝试响应式设计 所以如果这是一个愚蠢的简单问题 请原谅 我创建了一个图像并将其最大宽度设置为不大于图像的实际宽度 因为我知道放大图像会导致模糊不清 我有点困惑的是 当我缩小窗口并且图像开始缩小时 它也变得模糊 这是正确的行为吗
  • 使用 Coldfusion 分页

    是否可以仅使用一个查询在 Coldfusion 中分页并显示页数 我的理解是 您显然可以使用一个查询进行分页 但您需要一个额外的查询来创建页面 这是为了计算结果总数 currentPage 1 resultsPerPage Offset i
  • 如何列出 nginx 中的所有虚拟主机

    有没有一个命令可以列出 CentOS 上 nginx 下运行的所有虚拟主机或服务器 我想将结果通过管道传输到文本文件以用于报告目的 我正在寻找与我用于 Apache 的命令类似的命令 apachectl S 2 gt 1 grep 端口 8
  • WSDL 中的数组响应 - SOAP PHP

    在我的 wsdl 代码中 我得到一个整数 我想返回数组中的结果 为什么在我的输入中我只有一个整数 而我需要数组中的结果 因为在我的 php 函数中 我想从客户端选择的整数中的数据库返回信息 例如 我的客户发送1 在我的php中 我从数据库中
  • 如何在 Spring 3 中以编程方式执行注销

    我有一个用于注销的 spring 配置 如下所示
  • 如何在应用程序打开或关闭的情况下在后台的特定日期时间快速运行任务

    我正在开发闹钟应用程序 我需要在特定时间安排闹钟 我使用scheduleLocalNotification用于安排警报 它工作正常 如我所愿 BUT在触发警报之前 我需要向 API 服务器发出请求 在该请求中 我想检查从 API 服务器返回
  • MSVC C4100:“应用程序”:未引用的形式参数警告

    使用 MSVC 编译时 以下代码会生成 C4100 警告 这怎么可能 显然引用了 应用程序 class ApplicationInfo public QObject Q OBJECT public static void initializ
  • MEF 或 MEF2 是否已融入 .NET Framework 中?

    我正在尝试了解 MEF 并且看到对 MEF 和 MEF 2 的引用 This site http www palmmedia de blog 2011 8 30 ioc container benchmark performance com
  • TypeScript 与 React Lazy 出现 Promise 错误

    我正在使用带有打字稿的反应 我使用了更高阶的组件来检查用户是否经过身份验证 添加临时后 我在路线中收到错误 如下所示 home nidhin Documents Nidhinbackup F iot remsys demotwo remsy
  • -fno-omit-frame-pointer 与 clang 等效的编译器选项

    我想用DS 5 Streamline profiler来分析我的代码 在文档中提到 为了能够查看调用堆栈 我们需要使用编译器选项来编译代码 fno omit frame pointer gcc 中有这个选项 clang 也有等效的选项吗 f
  • 在 Java 中有效地对图像进行颜色循环

    我正在编写一个曼德尔布罗分形查看器 我想以智能的方式实现颜色循环 给定一个图像 我想修改它的 IndexColorModel 据我所知 没有办法修改 IndexColorModel 也没有办法为图像提供新的 IndexColorModel
  • 在 Python 3.x 中,让 print 像在 Python 2 中一样工作(as 语句)

    我想知道 print 函数是否可以像 Python 2 及更早版本中那样工作 无需更改整个语法 所以我有这样的声明 print Hello World 我喜欢在 Python 3 中使用该语法 我尝试导入该库six 但这并没有解决问题 仍然
  • 要传递给迭代器的值类型的可变包装器

    我正在编写一个需要传递可变整数的迭代器 public IEnumerable
  • 如何在jsdoc上添加和使用标签?

    我正在尝试向 jsdoc 添加自定义标签 我在插件目录中创建了一个文件 如下所示 方法 js exports defineTags function dictionary dictionary defineTag methodHttp mu
  • Rails 5.2 Active Storage 添加自定义属性

    我有一个带有附件的模型 class Project lt ApplicationRecord has many attached images end 当我附加并保存图像时 我还想保存一个附加的自定义属性 display order 整数
  • 将多索引的一级拆分为列

    所以我有一个数据框 df pd DataFrame foo fizz 1 foo fizz 2 foo buzz 3 foo buzz 4 bar fizz 6 bar buzz 8 columns a b c a b c 0 foo fi
  • 从自动完成地点 api 返回的 place_id 获取 Lat Lang

    我正在使用 google autocomplete place api 在我的应用程序中搜索该地点 现在我想获取我搜索过的地点的纬度和经度 如何从android中google的autocomplete place api返回的结果中获取纬度
  • 如何纠正 Highcharts 中的鼠标事件

    我正在尝试绘制 xy 线 其中 y 轴反转 并且我得到了图 但是mouse event我无法纠正它 它显示反向事件 我想自动找到轴的最小值和混合 如何做到这一点 以及如何将 x 轴置于顶部 这是我的代码 JS function var ch