Как сбросить предметы в области легенды в Highcharts?

Question

Я выполнил странное требование для Highcharts:

В Highcharts мы можем выбрать, показывать легенду или нет, значение элементов исходит из данных. Но теперь мне нужно удалить дублирующийся элемент, если они имеют одинаковый цвет, и сбросить значение на новый.

Как показано на рисунке ниже: Задача C и Task E имеют одинаковый цвет, поэтому нам нужно сохранить только один элемент и переименовать его.

Я проверил на официальном сайте по адресу highcharts , но все еще не нашел эффективного способа, я приложил свой тестовый код ниже, может кто-нибудь помочь мне, пожалуйста?

Заранее спасибо!

Описание изображения:

Тестовый код:

   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'>\u25CF</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>

Результат выполнения тестового кода

Answer 1

Чтобы добиться ожидаемого эффекта, вам нужно выполнить итерацию по всем сериям на chart.events.load и проверить, имеет ли какая-то пара рядов одинаковый цвет. Если да, то просто обновите имя первой серии и установите параметр второй серии linkedTo равным имени, которое вы указали в первой. Пожалуйста, посмотрите на код ниже:

   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
               })
             }
           })
         })
       }
     }
   }

Теперь вы должны убедиться, что серии, которые вы хотите объединить, имеют одинаковый цвет.

Живой пример: https://jsfiddle.net/o83j7bkc/

Справочник по API:

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

Answer 2

отметьте plotOptions.series.linkedTo и измените имя серии соответственно

connectedTo: строка Идентификатор другой серии для ссылки. Кроме того, значение может быть «: предыдущий» для ссылки на предыдущую серию. Когда две серии связаны, в легенде появляется только первая. Переключение видимости этого также переключает связанный ряд. По умолчанию не определено.

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'>\u25CF</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>