Сплайновая диаграмма Highchart без маркеров и условных обозначений в виде окружности

#javascript #highcharts

#javascript #highcharts

Вопрос:

Кто-нибудь может мне помочь с этим, мне нужен следующий символ-маркер легенды, отмеченный на изображении в виде круга?

Я пытался добавить marker: circle внутри ряда, но это не работает.

Я новичок в Highcharts. Есть ли какой-либо возможный способ исправить это?

Заранее спасибо.

вот изображение

ПРИМЕЧАНИЕ: Моя диаграмма содержит несколько рядов.

 {
  "series": [{
    "name": "Test series",
    "data": [{

      "y": 8,

    }, {

      "y": 10,

    }, {

      "y": 15,

    }, {

      "y": 8,

    }],
    "type": "spline",
    "color": "#dd0014",
    marker: {
      symbol: 'circle'
    }
  }],
  "xAxis": {
    "categories": ["cat-1", "cat-2", "cat-3"],
  },

  "plotOptions": {
    "series": {
      "marker": {
        "symbol": "circle",
        "enabled": false
      },

    },


  },
  "legend": {
    "align": "right",
    "enabled": true,
    "y": 35,
    "x": 0,
    "verticalAlign": "top",
    "layout": "vertical",
    "itemStyle": {
      "fontSize": "12px",
      "fontWeight": "light"
    },
    "reversed": true,
    "symbolRadius": 9,
    "itemMarginTop": 3,
    "itemMarginBottom": 3,
    "marker": "circle"
  },
  "colors": ["#00B19D", "#4E3363", "#3A99D5", "#00AE84", "#49494A", "#318ACA"],
  "credits": {
    "enabled": false
  },



}
  

Ссылка на JsFiddle здесь

Ответ №1:

Я нашел обходное решение после ознакомления с документацией Highcharts.

  chart: {
    events: {
      load: function() {
        $(".highcharts-legend-item path").attr('stroke-width', 10);
        $(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
        $(".highcharts-legend-item path").attr("stroke-linecap", "round");
      },
      redraw: function() {
        $(".highcharts-legend-item path").attr('stroke-width', 10);
        $(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
        $(".highcharts-legend-item path").attr("stroke-linecap", "round");
      }
    }
  },
  

добавлено это для обновления символов условных обозначений с помощью JQUERY

ССЫЛКА на ДЕМОНСТРАЦИЮ ЗДЕСЬ