Question

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

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

我需要创建一个将从Java应用程序生成的JSON文件结构。下面的图片也可以帮助这个例子。 enter image description here [编辑]根据要求，这些是我测试的两个代码（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;
    }
},

谢谢，欧金尼奥

Answer 1

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

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

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

您可以在不指定x值的情况下执行此操作，只需将数据放在与其对应的cetegories相同的顺序中即可。

2）工具提示

你几乎走在正确的轨道上，你只是太过分了。

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

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

formatter:function()

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

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

即

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'
            }
        }
    },

如何在Highcharts中混合系列，数据和xAxis类别？

1 个答案: