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

选中plotOptions.series.linkedTo并相应地更改系列名称

linkedTo：字符串要链接到的另一个系列的ID。此外，该值可以是“：previous”以链接到上一个系列。当两个系列链接在一起时，只有第一个出现在图例中。切换可见性也会切换链接的系列。默认为未定义。

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>

Answer 2

为了获得预期的效果，您需要对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

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

2 个答案: