0

我需要创建一个能够混合系列、数据和 xAxis 的柱形图。也许下面的例子可能更容易理解我的问题：

我有一组产品需要成为我的 xAxis 类别。我们称它们为 A、B、C 和 D。对于每个产品，我有 2 个值显示为列，A 的值 A1 和 A2，B 的值 B1 和 B2，依此类推。A1、B1、C1 和 D1 上的所有值都必须称为“hello”，其他 A2、B2、C2 和 D2 必须称为“world”。“你好”必须是蓝色的，“世界”必须是红色的。此外，当我将鼠标悬停在每一列上时，它们都有不同的值，但必须始终显示相应的产品。

我需要创建一个从 Java 应用程序生成的 JSON 文件结构。下图也可能对示例有所帮助。 在此处输入图像描述 [编辑] 根据要求，这些是我测试的两个代码（JSON 文件）：

这绝对是错误的方法：

{      
    "series": [
        {
            "type": "column",
            "name": "A"
            "composition": {
                "custom_tooltip": "My custom tooltip for A"
            },
            "data": [{
                "name": "A1",
                "color": "#777777",
                "y": 37.225
            }, {
                "name": "A2",
                "color": "#0088cc",
                "y": 31.013
            }]
        },
        {
            "type": "column",
            "name": "B"
            "composition": {
                "custom_tooltip": "My custom tooltip for B"
            },
            "data": [{
                "name": "B1",
                "color": "#777777",
                "y": 31.888
            }, {
                "name": "B2",
                "color": "#0088cc",
                "y": 28.910
            }]
        },
        {
            "type": "column",
            "name": "C"
            "composition": {
                "custom_tooltip": "My custom tooltip for C"
            },
            "data": [{
                "name": "C1",
                "color": "#777777",
                "y": 49.101
            }, {
                "name": "C2",
                "color": "#0088cc",
                "y": 41.001
            }]
        },
        {
            "type": "column",
            "name": "D"
            "composition": {
                "custom_tooltip": "My custom tooltip for D"
            },
            "data": [{
                "name": "D1",
                "color": "#777777",
                "y": 59.890
            }, {
                "name": "D2",
                "color": "#0088cc",
                "y": 55.491
            }]
        }
    ]
}

而且我还尝试了柱和栏的基本配置。

[Edit2] @jlbriggs 提供的示例解决了我的问题。我更新了我的 JSON 文件并将使用 this.point.var 功能来显示自定义工具提示。

对于每个带有“系列”的“数据”，我将添加变量来创建工具提示。

{      
    "xAxis": {
        "categories": [
            "A",
            "B",
            "C",
            "D"
        ]
    },

    "series": [
        {
            "name": "Hello",
            "type": "column",
            "color": "#777777",
            "data": [
            {
                "tooltip": "Yo, I'm a cool tooltip for A1",
                "y": 37.225
            },
            {
                "tooltip": "Yo, I'm a cool tooltip for B1",
                "y": 42.542
            },
            {
                "tooltip": "Yo, I'm a cool tooltip for C1",
                "y": 49.093
            },
            {
                "tooltip": "Yo, I'm a cool tooltip for D1",
                "y": 58.391
            }
            ]
        },
        {
            "name": "World",
            "type": "column",
            "color": "#0088cc",
            "data": [
            {
                "tooltip": "Yo, I'm a cool tooltip for A2",
                "y": 37.225
            },
            {
                "tooltip": "Yo, I'm a cool tooltip for B2",
                "y": 42.542
            },
            {
                "tooltip": "Yo, I'm a cool tooltip for C2",
                "y": 49.093
            },
            {
                "tooltip": "Yo, I'm a cool tooltip for D2",
                "y": 58.391
            }
            ]
        }
    ]
}

.js 文件将具有：

tooltip: {
    formatter: function() {
        return this.point.tooltip;
    }
},

谢谢， 欧金尼奥

4

1 回答 1

0

1）您需要查看类别：http ://api.highcharts.com/highcharts#xAxis.categories

1a) 在您的数据中，您使用类别的数组索引将数据点与正确的类别相关联。

因此，如果您的类别是 ['A','B','C','D']，您可以使用 0 的“X”值对齐 A 组的数据。B = 1 等。

您可以在不指定 x 值的情况下执行此操作，只需将数据按照与它们对应的 cetegories 相同的顺序排列即可。

2) 工具提示

你几乎在正确的轨道上，你只是有太多的事情要做。

只需在数据点对象中指定一个参数，然后在工具提示格式化程序中调用它：

http://jsfiddle.net/jlbriggs/fbMQf/

formatter:function()

您还可以在格式化程序函数中检查它是哪个系列，并根据系列返回工具提示，而不仅仅是点：

http://jsfiddle.net/JVNjs/313/

IE

tooltip:{
        formatter:function() {
            if(this.series.name == 'A') {
                return 'this is a a tooltip for series A';
            }
            else {
                return 'this is how series B tooltips look'
            }
        }
    },
于 2013-05-28T14:18:33.007 回答