代码之家 › 专栏 › 技术社区 › flyingfox

如何在图表中重置图例区域中的项目?

highcharts jquery javascript

flyingfox · 技术社区 · 6 年前

我满足了一个奇怪的要求 Highcharts

在高位图表中,我们可以选择是否显示图例,项目值来自数据。但是现在我需要删除重复的项目,如果他们有相同的颜色和重置值为一个新的。

如下图所示: 和 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>

2 回复 | 直到 6 年前

Deep 3015 6 年前

检查 plotOptions.series.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>

daniel_s 6 年前

为了达到预期的效果,您需要对上的所有系列进行迭代 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