Javascript Highchart Js柱形图堆叠和分组

我使用列堆叠和分组图表进行比较

检查以下示例代码：@fiddle

我试图比较两个男性堆栈

我希望分组图表具有相同的项目颜色，并且没有重复的图例

i、 在使用约翰的地方，它应该有相同的颜色和腿，并且应该只有一个约翰，而不是两个

有人能帮我查一下这个密码吗

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({

            chart: {
                renderTo: 'container',
                type: 'column'
            },

            title: {
                text: 'Total fruit consumtion, grouped by gender'
            },

            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },

            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Number of fruits'
                }
            },

            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },

            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },

            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2],
                stack: 'male'
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                stack: 'male'
            }, {
                name: 'John',
                data: [2, 5, 6, 2, 1],
                stack: 'male2'
            }, {
                name: 'Joe',
                data: [3, 0, 4, 4, 3],
                stack: 'male2'
            }]
        });
    });

});

$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
类型：“列”
},
标题：{
正文：“水果消费总量，按性别分组”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
},
亚克斯：{
allowDecimals:false，
分:0,，
标题：{
文本：“水果数量”
}
},
工具提示：{
格式化程序：函数（）{
返回“+this.x+”
+
this.series.name+'：'+this.y+'
+
“总计：”+this.point.stackTotal；
}
},
打印选项：{
专栏：{
堆叠：“正常”
}
},
系列：[{
姓名：'约翰'，
数据：[5,3,4,7,2]，
堆栈：“男性”
}, {
名字：'乔'，
数据：[3,4,4,2,5]，
堆栈：“男性”
}, {
姓名：'约翰'，
数据：[2,5,6,2,1]，
堆栈：“male2”
}, {
名字：'乔'，
数据：[3,0,4,4,3]，
堆栈：“male2”
}]
});
});
});

您可以手动定义系列颜色并在图例中隐藏第二组颜色，但这并不能真正链接数据。例如，如果你点击图例，它不会同时隐藏两个约翰。据我所知，不支持在不同系列中关联2个点的这种类型。我想说，我认为您可能需要重新思考如何表示您的数据，我仍然不明白您试图实现什么

系列：[{ 姓名：'约翰'， 颜色：'蓝色'， 数据：[5,3,4,7,2]， 堆栈：“男性” }, { 姓名：'约翰'， 颜色：'蓝色'， showInLegend:false， 数据：[2,5,6,2,1]， 堆栈：“male2” }] });

---

您可以手动定义系列颜色，并在图例中隐藏第二组颜色，但这并不能真正链接数据。例如，如果你点击图例，它不会同时隐藏两个约翰。据我所知，不支持在不同系列中关联2个点的这种类型。我想说，我认为您可能需要重新思考如何表示您的数据，我仍然不明白您试图实现什么

系列：[{ 姓名：'约翰'， 颜色：'蓝色'， 数据：[5,3,4,7,2]， 堆栈：“男性” }, { 姓名：'约翰'， 颜色：'蓝色'， showInLegend:false， 数据：[2,5,6,2,1]， 堆栈：“male2” }] });

---

我想这就是你想要的：

正如Ben所说，手动设置堆栈的颜色。然后为第二个堆栈提供ID并添加

event: {
  legendItemClick: function(event){
     this.visible? 
       this.chart.get('Joe2').hide() :
       this.chart.get('Joe2').show();
  }
}

---

我想这就是你想要的：

正如Ben所说，手动设置堆栈的颜色。然后为第二个堆栈提供ID并添加

event: {
  legendItemClick: function(event){
     this.visible? 
       this.chart.get('Joe2').hide() :
       this.chart.get('Joe2').show();
  }
}

在第一个堆栈中串联。

使用LinkedTo

其演示如下：

linkedTo: ':previous',

这样，图例仍然可以正常使用，您不需要将颜色设置为相同的颜色。

使用LinkedTo

其演示如下：

linkedTo: ':previous',

---

这样，图例仍然可以正常使用，您不需要将颜色设置为相同的颜色。

我最近遇到了同样的问题。所以我所做的是，结合上面的两个答案来解决这个问题

---

我最近遇到了同样的问题。所以我所做的是，结合上面的两个答案来解决这个问题

---

你为什么一开始就有两个约翰？我不明白有什么区别is@ben336我比较了两个系列，所以每个系列都有约翰。我正在使用堆栈识别不同的序列。这里有两个堆栈是男性和男性2你能给我们一些见解，你实际上是想想象什么吗？可能有更好的可视化替代方案吗？@JugalThakkar：我想可视化一个对比图。我在这里使用stack选项来实现它。在这个演示中，将阳堆栈与male2堆栈进行比较。有没有其他的方法可以形象化呢？为什么你一开始就有两个约翰？我不明白有什么区别is@ben336我比较了两个系列，所以每个系列都有约翰。我正在使用堆栈识别不同的序列。这里有两个堆栈是男性和男性2你能给我们一些见解，你实际上是想想象什么吗？可能有更好的可视化替代方案吗？@JugalThakkar：我想可视化一个对比图。我在这里使用stack选项来实现它。在这个演示中，将阳堆栈与male2堆栈进行比较。有没有其他方法可以形象化呢？我最喜欢这种方法。但是，它还不能很好地扩展，因为每个系列都需要自己的id。可能

this.series.forEach（函数（serie）{if（serie.name==myname）}

？我最喜欢这种方法。但是，它还不能很好地扩展，因为每个系列都需要自己的id==