Значок легенды диапазона областей не соответствует маркеру

У меня есть следующая диаграмма:

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>

Проблема в том, что, хотя я указал маркер с квадратным символом, я получаю кружок в легенде. Есть ли способ сопоставить легенду с маркером?

Если бы вы просто хотели изменить все символы на квадрат, то это подойдет: legend: { symbolRadius: 0 }, я понимаю, что это, вероятно, не то, что вам нужно, а скорее настройка для каждой серии. Этого не существует, вам нужно будет настроить каждый элемент легенды отдельно, примерно так: jsfiddle.net/ewolden/ycen9f3k/12

ewolden 11.04.2018 13:07

Возможный дубликат: stackoverflow.com/questions/27510810/…

João Menighin 11.04.2018 13:17

@ JoãoMenighin, это не дубликат, потому что достижение того, что я хочу на линейных диаграммах, тривиально, если вы видите jsfiddle.net/my51r39L, это для диаграммы области

apokryfos 11.04.2018 13:19
3
3
284
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Что ж, у меня есть что-то вроде того, что я хочу. Но это кажется очень (очень) хакерским.

Идея состоит в том, чтобы создать две линейные диаграммы, одну для верхнего предела и одну для нижнего предела. Эти линейные диаграммы должны иметь одинаковый цвет и символ, а также иметь ширину линии 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>

У этого есть очевидные недостатки, а именно:

  1. Вам нужно 3 серии вместо 1
  2. Вы должны явно установить цвета для всех трех, иначе это будет выглядеть странно.

Это кажется действительно плохим решением, поэтому, если у кого-то есть идеи получше, дайте мне знать.

Ответ принят как подходящий

О той же проблеме сообщается на 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;
}

Вау, это действительно работает (например, в jsfiddle.net/3onqd9L5/1). Если вы хотите обновить этот ответ и переместить сюда часть Highcharts.seriesTypes.arearange.prototype.drawLegendSymbol, я могу отметить его как принятый.

apokryfos 12.04.2018 10:10

Другие вопросы по теме