highcharts - ハイチャートでシリーズ、データ、xAxis カテゴリを混在させる方法は?

Question

シリーズ、データ、xAxis を混在させることができる縦棒グラフを作成する必要があります。おそらく、以下の例は私の問題を理解しやすいかもしれません:

xAxis カテゴリにする必要がある一連の製品があります。それらをA、B、C、Dと呼びましょう。各製品について、列として表示する2つの値があり、Aの場合は値A1とA2、Bの場合はB1とB2などです。A1、B1、C1、および D1 のすべての値は「hello」と呼ばれ、その他の A2、B2、C2、および D2 は「world」である必要があります。「Hello」は青、「world」は赤でなければなりません。また、各列にマウスを合わせると、すべての値が異なりますが、常に対応する製品を表示する必要があります。

Java アプリケーションから生成される JSON ファイル構造を作成する必要があります。下の画像も例に役立つかもしれません。 [編集] リクエストに応じて、これらは私がテストした 2 つのコード (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;
    }
},

ありがとう、ユージニオ