首页 > 解决方案 > highchart - 如何处理标志重叠问题?

问题描述

在此处输入图像描述我的图表应该显示许多标志,但我想在标志之间不重叠的情况下显示。但我发现一些标志重叠。如何在标志之间不重叠的情况下显示?我的客户不允许标志之间有任何文本重叠。让我知道如何解决它。(我附加了另一张带有红色圆圈点的图片。)丑闻和金属贸易标志重叠。但是我们不能为每个数据设置不同的 y 位置,因为它来自表。我如何排除这些关于标志显示的情况?

在此处输入图像描述 在此处 输入图像描述

function addSeriesDataChartView(data, cond){
var seriesOptionsPrdct = {};
seriesOptionsPrdct.id = cond;
seriesOptionsPrdct.lineWidth= 2;
seriesOptionsPrdct.type= 'line';
seriesOptionsPrdct.dashStyle ="shortdash";
seriesOptionsPrdct.showInNavigator=false;

seriesOptionsPrdct.name = "이벤트";
seriesOptionsPrdct.type= 'flags';
seriesOptionsPrdct.shape= 'squarepin';
seriesOptionsPrdct.data= data;
data: [{
  bse_dt : "1996-07-19"
  code_cntry:"US"
  code_mkt;"STCK"
  evt_kwd:"US municipal bond"
  long_ewi_class:"1"
  prc_clos_dt:"1996-07-19"
  title:"US municipal bond"
  x:837734400000
  y:638.73 },
 {
  bse_dt : "1996-09-23"
  code_cntry:"US"
  code_mkt;"STCK"
  evt_kwd:"Fed Meeting"
  long_ewi_class:"1"
  prc_clos_dt:"1996-09-23"
  title:"Fed Meeting"
  x:843436800000
  y:686.48 },
 {
  bse_dt : "1996-11-06"
  code_cntry:"US"
  code_mkt;"STCK"
  evt_kwd:"Scandal"
  long_ewi_class:"1"
  prc_clos_dt:"1996-11-06"
  title:"Scandal"
  x:847238400000
  y:724.59},
 {
  bse_dt : "1996-11-20"
  code_cntry:"US"
  code_mkt;"STCK"
  evt_kwd:"Metal Trade"
  long_ewi_class:"1"
  prc_clos_dt:"1996-11-20"
  title:"Metal Trade"
  x:848448000000
  y:743.95}]

seriesOptionsPrdct.color= mrktChartColor.prdctLine[0];
seriesOptionsPrdct.onSeries=$(".gnb_dep02 li a.on").attr('id');
seriesOptionsPrdct.onSeries='dataseries';
//seriesOptionsPrdct.lineWidth= 1;


chartMain.addSeries(seriesOptionsPrdct);
}

//

标签: highchartsflags

解决方案


我成功重现了你描述的情况:http: //jsfiddle.net/BlackLabel/dn7poc81/

您的问题是由'squarepin'形状类型引起的,目前存在重叠问题。您需要使用临时'flag'形状类型:

series: [{
    type: 'flags',
    // shape: 'squarepin',
    ...
}]

这个问题看起来像一个bug,所以我在Highcharts GitHub上报告了它:https ://github.com/highcharts/highcharts/issues/9726


推荐阅读