javascript - 如何使用 highchart 导出带有自定义标记的仪表图表？

Question

我需要使用带有自定义标记的 Highcharts 的仪表图表。我已经实现并且运行良好。但是，在将我的图表导出为 JPEG 时，自定义标记未显示。

我尝试删除导出功能中的加载事件，但标记仍然不可见。如何实现这一目标？

请在这里找到我的 fiddle 链接 Fiddle Link

var test = Highcharts.chart('container', {
 chart: {
      style: {
        fontFamily: "FuturaPTCond",
        fontSize: "16px"
      },
      type: "solidgauge",
      events: {
        load: function() {
          var elementSVG;
          var chart = this,
            counter = 0,
            drawCircle = setInterval(function() {
              if (++counter >= 1000) {
                clearInterval(drawCircle);
              }
              renderCircle(chart);
              function renderCircle(chart) {
                let chartData = chart.userOptions.series[0].data[0];
                let color =
                  chartData < -21
                    ? "#DC143C"
                    : chartData >= -21 && chartData < 21
                    ? "#FF4500"
                    : chartData >= 21 && chartData < 51
                    ? "#FFFF00"
                    : chartData >= 51 && chartData < 71
                    ? "#00BFFF"
                    : chartData >= 71 && chartData < 91
                    ? "#ADFF2F"
                    : "#FF1493";
                var series = chart.series[0],
                  pathDivided = series.points[0].graphic.attr("d").split(" "),
                  pathElemArr = [];
                pathDivided.forEach(function(el, inx) {
                  if (el === "L") {
                    pathElemArr.push(parseFloat(pathDivided[inx + 1]));
                    pathElemArr.push(parseFloat(pathDivided[inx + 2]));
                  }
                });

                if (elementSVG) {
                  elementSVG.destroy();
                }
                document.getElementById(
                  "BackgroundColor"
                ).style.backgroundColor = "#fff";
                elementSVG = chart.renderer
                  .circle(pathElemArr[0] + 11.25, pathElemArr[1], 10)
                  .attr({
                    fill: "#fff",
                    stroke: color,
                    width: "30px",
                    "stroke-width": 8,
                    zIndex: 10,
                    startAngle: -90,
                    endAngle: 90,                   
                    transform: 'translate(0 10)'
                  })
                  .add();

              }
            }, 1);
          $(".highcharts-axis-title").attr("x", 600.5);
          $(".highcharts-axis-title").attr("y", 395.25);
          $(".highcharts-credits").attr("x", 725);
        },
        redraw: function() {
          $(".highcharts-axis-title").attr("x", 600.5);
          $(".highcharts-axis-title").attr("y", 395.25);
          $(".highcharts-credits").attr("x", 725);
        }
      }
    },

    title: null,

    pane: {
      center: ["50%", "85%"],
      size: "98%",
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: "#ffff",
        innerRadius: "0%",
        outerRadius: "0%"
      },
      shape: "arc"
    },
    // the value axis

    yAxis: {
      lineWidth: 0,
      tickWidth: 0,
      min: -100,
      max: 100,
      title: {
        text: "<p style='font-size: 20px; font-weight: bold'>Last 30 Days</p>",
        style: {
          color: "grey"
        }
      },
      tickPositions: [-100, -20, 20, 50, 70, 90, 100],
      minorTickInterval: 0,
      tickAmount: 0,
      plotBands: [
        {
          from: -100,
          to: -22,
          borderWidth: 5,
          borderColor: "#DC143C",
          color: "#DC143C",
          outerRadius: "92.5%"
        },
        {
          from: -18,
          to: 18,
          borderWidth: 5,
          borderColor: "#FF4500",
          color: "#FF4500",
          outerRadius: "92.5%"
        },
        {
          from: 22,
          to: 48,
          borderWidth: 5,
          borderColor: "#FFFF00",
          color: "#FFFF00",
          outerRadius: "92.5%"
        },
        {
          from: 52,
          to: 68,
          borderWidth: 5,
          borderColor: "#00BFFF",
          color: "#00BFFF",
          outerRadius: "92.5%"
        },
        {
          from: 72,
          to: 88,
          borderWidth: 5,
          borderColor: "#ADFF2F",
          color: "#ADFF2F",
          outerRadius: "92.5%"
        },
        {
          from: 92,
          to: 100,
          borderWidth: 5,
          borderColor: "#FF1493",
          color: "#FF1493",
          outerRadius: "92.5%"
        }
      ],
      labels: {
        enabled: true,
        distance: 10,
        rotation: 0,
        format: "<span style='fill:#00000; font-size: 16px'>{value}</span>"
      }
    },
    plotOptions: {
      solidgauge: {
        borderColor: "#009CE8",
        borderWidth: 0,
        radius: 90,
        innerRadius: "89%",
        dataLabels: {
          enabled: true,
          y: 5,
          borderWidth: 0,
          useHTML: true,
          format:
            '<div id="BackgroundColor" style="Width: 50px;text-align:center"><span style="font-size:70px;color: #000000; margin-left: -20px">{y}</span></div>'
        }
      }
    },
    series: [
      {
        name: "Speed",
        data: [-10],
        animation: {
          duration: 1500
        }
      }
    ],
    exporting: {
          type: 'image/jpeg',
          filename: 'test',
          allowHTML: true,
          enabled: false,
          chartOptions: {
            title: {
              text: "Test"
            },
            chart:{
              events:null
            }
          }
        }
  });

  $("#export").click(function(){
  test.exportChart();
  });

Answer 1

渲染图表以供导出时，无法触发使用setInterval触发的动画。为了导出此自定义标记，必须立即渲染。

我添加了一个逻辑来检查是否渲染图表以供导出。请参阅:

//logic for exporting 
if (!chart.renderer.forExport) {
  var drawCircle = setInterval(function() {
    if (++counter >= 1000) {
      clearInterval(drawCircle);
    }
    renderCircle(chart);

  }, 1);
} else {
  renderCircle(chart);
  //translate y position for exporting
  elementSVG.translate(0, 45)
}

演示:https://jsfiddle.net/BlackLabel/1j02bnpg/

请注意，为导出而呈现的图表具有不同的尺寸，因此您需要为此自定义标记找到不同的 y 值 - 作为解决方法，我使用翻译来移动它。