Highcharts JS 删除线性图表的提示和平方图例

Question

TL;DR - 希望我的 highcharts 图表看起来与 Shopify 的相同

我正在努力实现两件事，但我在文档中找不到答案，几乎什么都试过了

我想删除为每个条目呈现的网格线提示
让图例符号成为一个正方形（我试过 symbolRadius，但我也想删除其中的线）— 基本上我尝试过的任何东西都不适用于折线图

⬇️

以下是 xAxis 和 legend 属性：

  xAxis: {
    categories: categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'May', 'Jun', 'Jul'],
    labels: {
      formatter: function () {
        return moment(this.value).isValid() ? moment(this.value).format('MMM DD') : this.value
      },
      step: getLabelStepBasedOnCategories(categories),
      staggerLines: 1,
      style: {
        color: '#637381',
      },
    },
    crosshair: {
      width: 4.3,
      color: '#DFE3E8',
    },
    gridLineDashStyle: 'dash',
    gridLineWidth: 1,
    gridLineColor: '#DFE3E8',
    tickmarkPlacement: 'inside',
    startOnTick: true,
    endOnTick: true,
  }
  legend: {
    symbolHeight: 12,
    symbolWidth: 12,
    symbolRadius: 3,
    itemDistance: 8,
    align: 'right',

    itemStyle: {
      fontSize: '12px',
      color: '#6d7175',
      fontWeight: 400,
      letterSpacing: '-0.5px',
    },
  },

Answer 1

我对我的解决方案不是 100% 满意，但老实说我没有找到其他方法。

1.) 试试属性 tickInterval。有了它，您应该能够减少轴刻度之间的 space 。（示例也在 jsfiddle 中）。 Link to the doc

2.) 可以覆盖图例符号函数，用SVG路径绘制标签图标

Highcharts.wrap(Highcharts.Series.prototype, 'drawLegendSymbol', function (proceed, legend) {
    proceed.call(this, legend);


    this.legendLine.attr({
           d: ['M', 0, 10, 'h', 0, 0, 5, 5]
    }).attr({
        'stroke-width': 10
    });
});

Link to the jsfiddle

加法： 也可以用图标覆盖标记，图标也会显示在图例中。缺点是，如果禁用标记，图例符号也将被禁用。

我在 Highcharts-Forums -> to the Topic 中找到了解决方案。

编辑 20.Mai 2022

已将 link 添加到具有新样式图例符号的新 jsFiddle。添加 link 到 SVG Path-Editor 工具，只需修改 SVG-Paths.

Link to new jsfiddle with square round borders

Amazing SVG Path-Editor from GitHub user Yqnn

  this.legendLine.attr({
           d: ['M', 2, 2, 'L', 5, 2, 'C', 7, 2, 7, 2, 7, 4, 'L', 7, 7, 'C', 7, 9, 7, 9, 5, 9, 'L', 2, 9, 'C', 0, 9, 0, 9, 0, 7, 'L', 0, 4, 'C', 0, 2, 0, 2, 2, 2]
    }).attr({
        'stroke-width': 7
    });
});

Highcharts JS 删除线性图表的提示和平方图例

Highcharts JS remove tips & squared legends for linear chart

javascript

highcharts

shopify