使用 render.text.css 拍摄 HighChart 的快照

Question

我有一个禁用了 x 轴标签的简单 highChart。稍后我使用以下代码在图表中添加文本

function populateDateOnChart(chartID,minRange,maxRange) {
    var chart = graphChart;     
    if(chart) {
        var panelPlyGraph = Ext.getCmp(chartID);
        chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, panelPlyGraph.getHeight()-2)
        .css({
            color : '#666666' ,
            align : 'right',
            fontSize     : '18pt',
            fontWeight : 'normal'
        }).add();

        chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), panelPlyGraph.getWidth()-148, panelPlyGraph.getHeight()-2)
        .css({
            color : 'red',//'#666666' ,
            align : 'right',
            fontSize : '18pt',
            fontWeight : 'normal'
        }).add();

    }
}

我也试过将它添加到 chart.events.load，如下所示，但仍然无法在快照上获取它。

load: function() {
graphOffsets = {};
graphOffsets.left = graphChart.axes[0].left;
graphOffsets.length = graphChart.axes[0].len;
graphOffsets.min = graphChart.axes[0].min;
graphOffsets.max = graphChart.axes[0].max;
graphOffsets.invalidMax = inValidMaxdate;
populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max);

}

我能够在我的 HTML 页面中完美地实现 xAxis 标签。问题是，我需要保存图表的图像。为此，我使用了 canvg。图像出现，但使用 chart.renderer.text.css 设置的 xAxis 文本未出现在图像中。

xAxis 标签属性很好，但它不允许我在第一个标签之前和第一个标签之后添加填充。

任何人都可以向我推荐一个替代 canvg 的方法，它在保存图像时也需要 chart.render.text.css 或者一种在 highChart 中定位标签的方法，如代码所示。

我们没有 HighChart div，我们将它放在 ExtJS 面板中。这可能是标签未出现在快照中的原因吗？

提前致谢！

Answer 1

我想我知道问题出在哪里 - 正如您所建议的，您得到了错误的容器。要更改的两件事：

populateDateOnChart('AccumulateGraph', graphOffsets.min, graphOffsets.max); - 使用 this 而不是 'AccumulateGraph'：populateDateOnChart(this, graphOffsets.min, graphOffsets.max); - 现在您将传递图表对象，而不仅仅是 ID

相应地更新您的方法：

    function populateDateOnChart(chart,minRange,maxRange) {
            chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', minRange), 1, chart.plotTop + chart.plotHeight - 20)
            .css({
                color : '#666666' ,
                align : 'right',
                fontSize     : '18pt',
                fontWeight : 'normal'
            }).add();

            chart.renderer.text(Highcharts.dateFormat('%Y-%m-%d', maxRange), chart.plotLeft + chart.plotWidth -148, chart.plotTop + chart.plotHeight - 20)
            .css({
                color : 'red',//'#666666' ,
                align : 'right',
                fontSize : '18pt',
                fontWeight : 'normal'
            }).add();
    }

我很好奇 - 为什么不能使用轴标签？例如，您可以使用 xAxis.tickPositioner 到 return 只有第一个和最后一个值，如下所示：

xAxis: {
  tickPositioner: functin(min, max) {
    return [min, max];
  },
  labels: {
    formatter: function() {
      return Highcharts.dateFormat('%Y-%m-%d', this.key);
    }
  }
}

使用 render.text.css 拍摄 HighChart 的快照

Take snapshot of HighChart with render.text.css

javascript

svg

screenshot

highcharts

canvg