Question

我有以下图表：

var highchartOptions = {
  "chart": {
    "type": "arearange",
    "renderTo": "chart-container"
  },
  "series": [{
    "marker": {
      "symbol": "square"
    },
    "tooltip": {
      "pointFormat": '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.formattedValue}</b><br/>'
    },
    "data": [{
        "low": 50.5,
        "high": 58.4,
        "formattedValue": "Between 50.5 and 58.4",
        "x": 0
      },
      {
        "low": 56.6,
        "high": 61.4,
        "formattedValue": "Between 56.6 and 61.4",
        "x": 1
      },
      {
        "low": 58,
        "high": 61.8,
        "formattedValue": "Between 58 and 61.8",
        "x": 2
      },
      {
        "low": 60.7,
        "high": 65.3,
        "formattedValue": "Between 60.7 and 65.3",
        "x": 3
      },
      {
        "low": 57.9,
        "high": 60.3,
        "formattedValue": "Between 57.9 and 60.3",
        "x": 4
      },
      {
        "low": 57,
        "high": 61.3,
        "formattedValue": "Between 57 and 61.3",
        "x": 5
      },
      {
        "low": 56.5,
        "high": 61.8,
        "formattedValue": "Between 56.5 and 61.8",
        "x": 6
      }
    ],
    "name": "Area"
  }]
};
var chart = new Highcharts.Chart(highchartOptions);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts-more.src.js"></script>
<div id='chart-container' style="width: 800px; height: 500px;">
</div>

问题在于，虽然我已经指定了带有方形符号的标记，但我在图例中得到了一个圆圈。有没有办法让图例与标记匹配？

Answer 1

github ：https://github.com/highcharts/highcharts/issues/7771

报告了同样的问题建议

解决方法稍微修改Highcharts核心：

Highcharts.seriesTypes.arearange.prototype.drawLegendSymbol = function(legend) {
  var lineWidth = this.options.lineWidth;
  this.options.lineWidth = 0;
  Highcharts.LegendSymbolMixin.drawLineMarker.apply(this, arguments);
  this.options.lineWidth = lineWidth;
}

Answer 2

嗯，我有一些看起来像我想要的东西。但感觉非常（非常）hacky。

这个想法是创建两个折线图，一个用于上限，一个用于下限。这些折线图应具有相同的颜色和符号，并且线宽应为0（不显示图例中标记之间的线）。然后我像以前一样创建区域范围系列。

应该链接这3个系列。

结果在技术上有效：

var highchartOptions = {
  "chart": {
"type": "line",
"renderTo": "chart-container"
  },
  "series": [{
  		"color": 'rgba(0,0, 150, 1)',
  "marker": {
    "symbol": "diamond"
  },
  lineWidth: 0,
  "tooltip": { enabled: false },
  "data": [{
      "y": 50.5,
      "formattedValue": "Between 50.5 and 58.4",
      "x": 0
    },
    {
      "y": 56.6,
      "formattedValue": "Between 56.6 and 61.4",
      "x": 1
    },
    {
      "y": 58,
      "formattedValue": "Between 58 and 61.8",
      "x": 2
    },
    {
      "y": 60.7,
      "formattedValue": "Between 60.7 and 65.3",
      "x": 3
    },
    {
      "y": 57.9,
      "formattedValue": "Between 57.9 and 60.3",
      "x": 4
    },
    {
      "y": 57,
      "formattedValue": "Between 57 and 61.3",
      "x": 5
    },
    {
      "y": 56.5,
      "formattedValue": "Between 56.5 and 61.8",
      "x": 6
    }
  ],
  "name": "Area"
},
{
		lineWidth: 0,
  "color": 'rgba(0,0, 150, 1)',
  "marker": {
    "symbol": "diamond"
  },
		"linkedTo": ":previous",
  "data": [{
      "y": 58.4,
      "formattedValue": "Between 50.5 and 58.4",
      "x": 0
    },
    {
      "y": 61.4,
      "formattedValue": "Between 56.6 and 61.4",
      "x": 1
    },
    {
      "y": 61.8,
      "formattedValue": "Between 58 and 61.8",
      "x": 2
    },
    {
      "y": 65.3,
      "formattedValue": "Between 60.7 and 65.3",
      "x": 3
    },
    {
      "y": 60.3,
      "formattedValue": "Between 57.9 and 60.3",
      "x": 4
    },
    {
      "y": 61.3,
      "formattedValue": "Between 57 and 61.3",
      "x": 5
    },
    {
      "y": 61.8,
      "formattedValue": "Between 56.5 and 61.8",
      "x": 6
    }
  ],
  "name": "Area"
},
{
	"color": 'rgba(0,0, 150, 0.5)',
	"type": "arearange",
  "linkedTo": ":previous",
  "tooltip": {
    "pointFormat": '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.formattedValue}</b><br/>'
  },
  marker: {
  	enabled: false,
    symbol: 'diamond'
  },      
  "data": [{
      "low": 50.5,
      "high": 58.4,
      "formattedValue": "Between 50.5 and 58.4",
      "x": 0
    },
    {
      "low": 56.6,
      "high": 61.4,
      "formattedValue": "Between 56.6 and 61.4",
      "x": 1
    },
    {
      "low": 58,
      "high": 61.8,
      "formattedValue": "Between 58 and 61.8",
      "x": 2
    },
    {
      "low": 60.7,
      "high": 65.3,
      "formattedValue": "Between 60.7 and 65.3",
      "x": 3
    },
    {
      "low": 57.9,
      "high": 60.3,
      "formattedValue": "Between 57.9 and 60.3",
      "x": 4
    },
    {
      "low": 57,
      "high": 61.3,
      "formattedValue": "Between 57 and 61.3",
      "x": 5
    },
    {
      "low": 56.5,
      "high": 61.8,
      "formattedValue": "Between 56.5 and 61.8",
      "x": 6
    }
  ],
  "name": "Area"
}
  ]
};
var chart = new Highcharts.Chart(highchartOptions);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/5.0/highcharts-more.src.js"></script>
<div id='chart-container' style="width: 800px; height: 500px;">
</div>

这有明显的缺点，即：

您需要3个系列而不是1个
您必须明确设置所有3的颜色才能匹配，否则看起来很奇怪。

这感觉就像一个非常糟糕的解决方案，所以如果有人有更好的想法，请告诉我。

Answer 3

根据这个 GitHub 问题评论：

https://github.com/highcharts/highcharts/issues/7771#issuecomment-361981394

你可以只替换渲染器：

Highcharts['seriesTypes'].arearange.prototype.drawLegendSymbol = 
Highcharts['seriesTypes'].line.prototype.drawLegendSymbol;

区域范围图例图标与标记不匹配

3 个答案: