Question

我有一个折线图，我自定义了图例符号。在图表中，使用useHTML的自定义和div的样式作为图例符号正在运行，但我在导出自定义方面很困难。

我试过这样的事情：

exporting:{
    allowHTML : true,
    sourceWidth:1024,
    chartOptions: {
        title: {
            style: {
                fontSize: '14px'
            }
        },
        legend : {
            symbolPadding: 0,
            symbolWidth: 0,
            symbolHeight : 0,
            symbolRadius: 0,
            useHTML : true,
            labelFormatter : function () {
                return '<div>' +
                        '<div class="legend-symbol-bar" style="background-color: ' + this.color +';"> </div>' +
                        "<span> " + this.name + " </span>" +
                        '</div>'
            }
        }
    }
}

但出口的传说有点无效。

这是js fiddle。

Answer 1

似乎Highcharts导出省略了CSS文件中定义的样式。如果你通过JS（load event）分配它们，它们可以工作：

    chartOptions: {
      chart: {
        events: {
          load: function() {
            this.legend.update({
              symbolWidth: 0,
              labelFormatter: function() {
                this.legendSymbol.css({
                  display: 'none'
                });
                return '<div>' +
                  '<div style="width: 18px; height: 12px; display: inline-block; background-color: ' + this.color + ';"> </div>' +
                  "<span> " + this.name + " </span>" +
                  '</div>'
              }
            });
          }
        }
      },
    (...)

图例符号也可以通过JS代码隐藏（css函数）。

现场演示： http://jsfiddle.net/kkulig/efhyabzs/

API参考：

在导出不起作用时修改高亮图的图例符号

1 个答案: