javascript - Highcharts - 需要高级工具提示功能

标签 javascript jquery graph charts highcharts

我在使用具有堆叠法线的面积图进行绘图时遇到问题。我在这里问的最后一个问题是:Highcharts help - Area chart stacking

这基本上是在询问如何在不规范化数据的情况下绘制要堆叠的值。有人告诉我,我可以从一个系列中减去另一个系列以使图表正确显示,但是,由于这种计算,悬停时的值是倾斜的。

例子: 之前:

Series Total:      [0,0,0,1,1,2,3]
Series In-Service: [0,0,0,0,0,1,2]

所以我修复了数据以将其绘制成图表:

Series Total:      [0,0,0,1,1,1,1]
Series In-Service: [0,0,0,0,0,1,2]

现在它可以很好地绘制图形,但工具提示是错误的,例如最后一个数据点应该是:

Series Total:      3
Series In-Service: 2

但它显示:

Series Total:      1
Series In-Service: 2

并且由于工具提示无法访问其他点,我们无法进行修复计算来显示它。除非我使用 shared: true,但我不能使用 shared,因为工具提示太大,因为我拥有所有系列。

如果我不清楚,请提出任何问题,我真的需要一些帮助。

最佳答案

设置系列数据时使用对象列表。您可以向数据点对象添加其他选项并从工具提示格式化程序访问它。

参见 http://jsfiddle.net/jgdreyes/JvSBk/举个例子。

var seriesTotal = [
    {x: 0, y: 0, customTooltip: 0},
    {x: 1, y: 0, customTooltip: 0},
    {x: 2, y: 0, customTooltip: 0},
    {x: 3, y: 1, customTooltip: 1},
    {x: 4, y: 1, customTooltip: 1},
    {x: 5, y: 1, customTooltip: 2},
    {x: 6, y: 1, customTooltip: 3}
];

var chart = new Highcharts.Chart({

    series: [
        {data: seriesTotal}
    ],

    tooltip: {
        formatter: function() {
            //access customTooltip option
            return this.point.customTooltip;
        }
    },
});

关于javascript - Highcharts - 需要高级工具提示功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7209379/

相关文章:

graph - 将饼图放置在 D3 中力导向布局图的节点上

javascript - Vue 3 传递数组警告 : Extraneous non-props attributes were passed to component but could not be automatically inherited

javascript - 使用 mobx 进行延迟加载的惯用方法

javascript - 根据 php if/else 语句的结果创建 javascript 操作

Javascript - 获取上个月的日期

javascript - d3.js 中的多个重力点

algorithm - 数组的二分匹配

javascript - Vue Dynamic Layouts 两次安装路由器 View 组件

javascript - 鼠标悬停功能不创建弹出窗口

javascript - 创建内联表单,Bootstrap