Question

我绘制的自定义SVG标记符号在图例中的呈现方式与图表中的呈现方式不同。我已经绘制了图表所需的标记，但在图例中，符号左侧有一条细线。

我在下面附上了一张图片，其中包含代码，我花了太多时间在这上面，没有人问过这个话题。如果有人能帮助我，我们将不胜感激。

function renderChart(data, startRange, endRange) {
    // Create custom marker
    Highcharts.SVGRenderer.prototype.symbols.lineBar = function (x, y, w, h) {
      return ['M', x + w / 2, y + h / 2, 'L', x + w + 10, y + h / 2, 'z'];
    };

    if (Highcharts.VMLRenderer) {
      Highcharts.VMLRenderer.prototype.symbols.lineBar = Highcharts.SVGRenderer.prototype.symbols.lineBar;
    }

    var chart = Highcharts.chart({
      chart: {
        renderTo: 'system-load-scheduler',
        type: 'line',
      },
      navigation: {
        buttonOptions: {
          enabled: false
        }
      },
      title: {
        text: ''
      },

      yAxis: {
        min: 0,
        title: {
          text: 'Tasks'
        },
        labels: {
          style: {
            color: 'blue'
          }
        },
        categories: generateCategories(data),
      },

      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          day: '%b %d'
        },
        title: {
          text: 'Date'
        }
      },

      tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: 'Scheduled {point.x:%b. %e} at {point.x:%l:%M%P}'
      },

      plotOptions: {
        line: {
          marker: {
            enabled: true
          }
        },

        series: {
          cursor: 'pointer',
          stickyTracking: false,
          marker: {
            states: {
              hover: {
                radiusPlus: 0,
                lineWidthPlus: 1,
                halo: {
                  size: 0
                }
              }
            }
          },
          states: {
            hover: {
              halo: {
                size: 0
              }
            }
          }
        }
      },

      legend: {
        enabled: true,
        symbolPadding: 20
      },

      series: generateSeries(data, startRange, endRange)
    });
    chart.yAxis[0].labelGroup.element.childNodes.forEach(function (label) {
      label.style.cursor = 'hand';
      label.onclick = function () {
        var idx = ctrl.allTaskNames.indexOf(this.textContent);
        renderTaskInfo(ctrl.data[idx]);
        ctrl.scheduler.taskIdx = idx;
        ctrl.backService.saveObject(CTRL_DASHBOARD_SCHEDULER_STR, ctrl.scheduler);
      };
    });

    return chart;
  }

Answer 1

您可以使用一些CSS代码删除该行

.highcharts-legend .highcharts-graph {
  display:none;
}

Fiddle

图表中的Highcharts自定义SVG标记符号形状不同

1 个答案: