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

643ylb08 于 2022-11-10 发布在 Highcharts

关注(0)|答案(1)|浏览(212)

TL;DR -希望我的highcharts图表看起来与Shopify的一样
我正在努力实现两件我在文档中找不到答案的事情，真的尝试了一切
1.我要移除为每个条目呈现的网格线提示
1.将图例符号设为正方形（我尝试过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',
    },
  },

highcharts

来源：https://stackoverflow.com/questions/72275561/highcharts-js-remove-tips-squared-legends-for-linear-chart

1条答案

按热度按时间

23c0lvtd1#

我对我的解决方案不是100%满意，但老实说，我没有找到其他方法。
1.)尝试使用属性tickInterval。使用该属性，您应该能够减少轴刻度之间的间距。（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中找到了这个解决方案。

编辑2022年5月20日

添加了指向新的jsFiddle的链接，带有新样式的图例符号。添加了指向SVG路径编辑器工具的链接，以简单地修改SVG路径。
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
    });
});

赞(0）回复(0）举报 2022-11-10

我来回答

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

1条答案

相关问题

热门标签

最新问答