图表中隐藏的重复图例

Question

我正在使用Highcharts生成动态图表。

我有一个月度数据比较，但是，我想知道是否可以只保留一个字幕名称。

为了更好地理解我正在放下我的代码。

你可能会注意到这个图例有两个名字“Fumularios”，这是由于我正在做的比较，但是，在视觉上我希望它只显示一个名字，第二个没有必要显示，因为颜色已经表明了数据信息。

chart = new Highcharts.Chart({
    "chart": {
        "renderTo": "container_5c6d32c33fee6",
        "type": "column"
    },
    "title": {
        "text": "Total por Capta\u00e7\u00f5es - Convers\u00f5es  (Formul\u00e1rio|Chatbot|Whatsapp)"
    },
    "colors": ["#65c07f", "#1d6c3f", "#f79969", "#e46a2b", "#fdc076", "#e4452b", "#004b76", "#003f23", "#b6740c", "#005a64", "#1b964e", "#83ccb0", "#24a1ae", "#ec9631", "#147bb6", "#ff7754", "#007b5a", "#6ecbd6", "#ba0d00", "#68a9dc"],
    "xAxis": {
        "categories": ["Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez", "Jan \u21e9-64.78%"]
    },
    "yAxis": {
        "title": {
            "text": "Quantidade"
        },
        "maxPadding": 0.01,
        "stackLabels": {
            "enabled": 1,
            "style": {
                "fontWeight": "bold",
                "fontSize": "14px",
                "color": "#000"
            }
        }
    },
    "legend": {
        "align": "center",
        "verticalAlign": "bottom",
        "backgroundColor": (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
        "borderColor": "#CCC",
        "borderWidth": 1,
        "shadow": false
    },
    "tooltip": {
        "formatter": function() {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },
    "plotOptions": {
        "column": {
            "stacking": "normal",
            "dataLabels": {
                "enabled": 1,
                "crop": 0,
                "style": {
                    "fontSize": "14px"
                },
                "overflow": "justify",
                "color": (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    "series": [{
        "name": "Formul\u00e1rio",
        "data": [1391, 1573, 1943, 1816, 1393, 2213, 2311, 1722, 1822, 1691, 1505, 1878],
        "color": "#1d6c3f",
        "stack": "A"
    }, {
        "name": "Formul\u00e1rio",
        "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579],
        "color": "#1d6c3f",
        "stack": "B"
    }, {
        "name": "Chatbot",
        "data": [628, 498, 689, 512, 511, 505, 501, 510, 623, 699, 665, 669],
        "color": "#68a9dc",
        "stack": "A"
    }, {
        "name": "Chatbot",
        "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 285],
        "color": "#68a9dc",
        "stack": "B"
    }, {
        "name": "Whatsapp",
        "data": [0, 0, 0, 0, 0, 0, 0, 0, 9, 90, 96, 0],
        "color": "#65c07f",
        "stack": "A"
    }, {
        "name": "Whatsapp",
        "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 33],
        "color": "#65c07f",
        "stack": "B"
    }]
});

Answer 1

你可以通过在重复的系列上设置series.column.showInLegend = false来实现它。检查下面发布的演示和代码。

码：

chart = new Highcharts.Chart({
  "chart": {
    "renderTo": "container",
    "type": "column"
  },
  "title": {
    "text": "Total por Capta\u00e7\u00f5es - Convers\u00f5es  (Formul\u00e1rio|Chatbot|Whatsapp)"
  },
  "colors": ["#65c07f", "#1d6c3f", "#f79969", "#e46a2b", "#fdc076", "#e4452b", "#004b76", "#003f23", "#b6740c", "#005a64", "#1b964e", "#83ccb0", "#24a1ae", "#ec9631", "#147bb6", "#ff7754", "#007b5a", "#6ecbd6", "#ba0d00", "#68a9dc"],
  "xAxis": {
    "categories": ["Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez", "Jan \u21e9-64.78%"]
  },
  "yAxis": {
    "title": {
      "text": "Quantidade"
    },
    "maxPadding": 0.01,
    "stackLabels": {
      "enabled": 1,
      "style": {
        "fontWeight": "bold",
        "fontSize": "14px",
        "color": "#000"
      }
    }
  },
  "legend": {
    "align": "center",
    "verticalAlign": "bottom",
    "backgroundColor": (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
    "borderColor": "#CCC",
    "borderWidth": 1,
    "shadow": false
  },
  "tooltip": {
    "formatter": function() {
      return '<b>' + this.x + '</b><br/>' +
        this.series.name + ': ' + this.y + '<br/>' +
        'Total: ' + this.point.stackTotal;
    }
  },
  "plotOptions": {
    "column": {
      "stacking": "normal",
      "dataLabels": {
        "enabled": 1,
        "crop": 0,
        "style": {
          "fontSize": "14px"
        },
        "overflow": "justify",
        "color": (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  "series": [{
    "name": "Formul\u00e1rio",
    "data": [1391, 1573, 1943, 1816, 1393, 2213, 2311, 1722, 1822, 1691, 1505, 1878],
    "color": "#1d6c3f",
    "stack": "A"
  }, {
    "name": "Formul\u00e1rio",
    "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579],
    "color": "#1d6c3f",
    showInLegend: false,
    "stack": "B"
  }, {
    "name": "Chatbot",
    "data": [628, 498, 689, 512, 511, 505, 501, 510, 623, 699, 665, 669],
    "color": "#68a9dc",
    "stack": "A"
  }, {
    "name": "Chatbot",
    "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 285],
    "color": "#68a9dc",
    showInLegend: false,
    "stack": "B"
  }, {
    "name": "Whatsapp",
    "data": [0, 0, 0, 0, 0, 0, 0, 0, 9, 90, 96, 0],
    "color": "#65c07f",
    "stack": "A"
  }, {
    "name": "Whatsapp",
    "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 33],
    "color": "#65c07f",
    showInLegend: false,
    "stack": "B"
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

演示：

• https://jsfiddle.net/BlackLabel/xfadnovy/1/

API参考：

• https://api.highcharts.com/highcharts/series.column.showInLegend