如何在Highcharts的图例区域重置项目？

Question

I have met a weird requirement for Highcharts :

In Highcharts we can choose to show the legend or not,the items value is coming from the data.But now I need to remove the duplicate item if they have the same color and reset the value to a new one.

As the image shows below: Task C and Task E have the same color,so we only need to preserve one item and rename it.

I have checked on the official website at highcharts ,but still do not find an effective way,I have attached my test code below,can anyone help me,please?

Thanks in advance!

Description image:

Test code:

  function formatDate(val){ var d = new Date(val); var cd = d.getDate(); var cm = d.getMonth() + 1; var cy = d.getFullYear(); return cy + "-" + cm + "-" + cd; } $(function () { $('#container').highcharts({ chart: { type: 'columnrange', inverted: true }, title: { text: 'Equipments Usage' }, subtitle: { text: 'Display based on date' }, xAxis: { categories: ['Equipment A', 'Equipment B', 'Equipment C', 'Equipment D', 'Equipment E', 'Equipment F'], gridLineDashStyle: 'longdash', gridLineWidth: 1, }, yAxis: { title: { text: 'Equipment use time range' }, type:'datetime', labels: { formatter:function(){ return formatDate(this.value); } }, }, plotOptions: { columnrange: { dataLabels: { enabled: true, formatter: function () { if(this.y == this.point.low){ return ""; } if(this.series.options.finished){ return "<span style='color:green'>\●</span> "; } } } } }, tooltip: { formatter:function(){ return this.series.name + '<br/>' + 'Start: <b>' + formatDate(this.point.low) + '</b><br/>' + 'End: <b>' + formatDate(this.point.high) + '</b><br/>' + 'Percent: <b>' + this.series.options.percent + '</b>'; } }, legend: { enabled: true, borderWidth:1, labelFormatter:function(){ return this.name; } }, series: [ { name: 'Task A', percent:'20%', finished:true, color:'lightgray', data: [ [1, Date.UTC(2018, 2, 6, 10), Date.UTC(2018, 2, 16, 10)], [3, Date.UTC(2018, 2, 9, 10), Date.UTC(2018, 2, 26, 10)], ], }, { name: 'TaskB', percent:'40%', finished:false, color:'lightblue', data: [ [1, Date.UTC(2018, 3, 6, 10), Date.UTC(2018, 4, 16, 10)], [2, Date.UTC(2018, 4, 26, 10), Date.UTC(2018, 5, 10, 10)], [3, Date.UTC(2018, 3, 8, 10), Date.UTC(2018, 4, 5, 10)] ], }, { name: 'Task C', percent:'60%', finished:false, color:'#b2f442', data: [ [0, Date.UTC(2018, 3, 26, 10), Date.UTC(2018, 4, 6, 10)], [1, Date.UTC(2018, 3, 16, 10), Date.UTC(2018, 3, 26, 10)], [4, Date.UTC(2018, 4, 10), Date.UTC(2018, 5, 6, 10)], ], }, { name: 'Task D', percent:'60%', finished:false, color:'red', data: [ [0, Date.UTC(2018, 5, 26, 10), Date.UTC(2018, 6, 6, 10)], [1, Date.UTC(2018, 5, 26, 10), Date.UTC(2018, 6, 16, 10)] ], }, { name: 'Task E', percent:'55%', finished:false, color:'#b2ff42', data: [ [2, Date.UTC(2018, 6, 1, 10), Date.UTC(2018, 6, 16, 10)], [4, Date.UTC(2018, 6, 1, 10), Date.UTC(2018, 6, 10, 10)] ], } ] }); }); 

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Test code run result

Answer 1

check plotOptions.series.linkedTo and change the series name accordingly

linkedTo: string The id of another series to link to. Additionally, the value can be ":previous" to link to the previous series. When two series are linked, only the first one appears in the legend. Toggling the visibility of this also toggles the linked series. Defaults to undefined.

 function formatDate(val) { var d = new Date(val); var cd = d.getDate(); var cm = d.getMonth() + 1; var cy = d.getFullYear(); return cy + "-" + cm + "-" + cd; } $(function() { $('#container').highcharts({ chart: { type: 'columnrange', inverted: true }, title: { text: 'Equipments Usage' }, subtitle: { text: 'Display based on date' }, xAxis: { categories: ['Equipment A', 'Equipment B', 'Equipment C', 'Equipment D', 'Equipment E', 'Equipment F'], gridLineDashStyle: 'longdash', gridLineWidth: 1, }, yAxis: { title: { text: 'Equipment use time range' }, type: 'datetime', labels: { formatter: function() { return formatDate(this.value); } }, }, plotOptions: { columnrange: { dataLabels: { enabled: true, formatter: function() { if (this.y == this.point.low) { return ""; } if (this.series.options.finished) { return "<span style='color:green'>\●</span> "; } } } } }, tooltip: { formatter: function() { return this.series.name + '<br/>' + 'Start: <b>' + formatDate(this.point.low) + '</b><br/>' + 'End: <b>' + formatDate(this.point.high) + '</b><br/>' + 'Percent: <b>' + this.series.options.percent + '</b>'; } }, legend: { enabled: true, borderWidth: 1, labelFormatter: function() { return this.name; } }, series: [{ name: 'Task A', percent: '20%', finished: true, color: 'lightgray', data: [ [1, Date.UTC(2018, 2, 6, 10), Date.UTC(2018, 2, 16, 10)], [3, Date.UTC(2018, 2, 9, 10), Date.UTC(2018, 2, 26, 10)], ], }, { name: 'TaskB', percent: '40%', finished: false, color: 'lightblue', data: [ [1, Date.UTC(2018, 3, 6, 10), Date.UTC(2018, 4, 16, 10)], [2, Date.UTC(2018, 4, 26, 10), Date.UTC(2018, 5, 10, 10)], [3, Date.UTC(2018, 3, 8, 10), Date.UTC(2018, 4, 5, 10)] ], }, { name: 'Task C', id: 'taskc', percent: '60%', finished: false, color: '#b2f442', data: [ [0, Date.UTC(2018, 3, 26, 10), Date.UTC(2018, 4, 6, 10)], [1, Date.UTC(2018, 3, 16, 10), Date.UTC(2018, 3, 26, 10)], [4, Date.UTC(2018, 4, 10), Date.UTC(2018, 5, 6, 10)], ], }, { name: 'Task D', percent: '60%', finished: false, color: 'red', data: [ [0, Date.UTC(2018, 5, 26, 10), Date.UTC(2018, 6, 6, 10)], [1, Date.UTC(2018, 5, 26, 10), Date.UTC(2018, 6, 16, 10)] ], }, { name: 'Task E', percent: '55%', finished: false, linkedTo: 'taskc', color: '#b2ff42', data: [ [2, Date.UTC(2018, 6, 1, 10), Date.UTC(2018, 6, 16, 10)], [4, Date.UTC(2018, 6, 1, 10), Date.UTC(2018, 6, 10, 10)] ], } ] }); }); 

 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/highcharts-more.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 2

In order to achieve expected effect, you need to do an iteration over all series on chart.events.load , and check if some pair of series has the same color. If yes, then just update the name of first series, and set second series linkedTo parameter equal to name you set on first one. Please take a look at code below:

   chart: {
     type: 'columnrange',
     inverted: true,
     events: {
       load() {
         var chart = this,
           series = chart.series,
           mergedCount = 1;
         series.forEach(series1 => {
           series.forEach(series2 => {
             if (
               series1.options.color === series2.options.color &&
               series1 !== series2 &&
               !series1.options.linkedTo &&
               !series2.options.linkedTo
             ) {
               series1.update({
                 name: 'Merged series ' + mergedCount
               })
               series2.update({
                 linkedTo: 'Merged series ' + mergedCount
               })
             }
           })
         })
       }
     }
   }

Now, you've only make sure that series you want to 'merge' has the same color.

Live example: https://jsfiddle.net/o83j7bkc/

API Reference:

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/class-reference/Highcharts.Series#update

https://api.highcharts.com/highcharts/plotOptions.series.linkedTo