Question

我一直想弄清楚为什么会发生这种情况很长一段时间。我的页面有三种图表：条形图，线条图和饼图模型。当我导出它时，饼图和线条会获得标签位移，条形图就可以了。

我认为它与jqplot css有关。但是，这仍然非常令人沮丧。

我的饼图在对话框中...... xhtml代码：

<p:dialog id="expanded-mission-distribution-dialog" resizable="false"
    widgetVar="expanded-mission-distribution-dialog-var" modal="true"
    dynamic="true">
    <p:panel id="expanded-mission-distribution-panel"
        styleClass="expanded-chart-panel ">
        <p:chart id="expanded-mission-distribution-chart" type="pie"
            styleClass="jqplot-target legend-spacing legend-size chart-dimension-3"
            widgetVar="expanded-mission-distribution-chart-var"
            model="#{fatigueDataSummaryAircraftAnalysisH.expandedMissionDistributionChart}" />
        <p:commandButton id="mission-distribution-export-button"
            type="button" icon="ui-circle-export" styleClass="ui-command-button"
            title="Click to save the chart as image"
            onclick="exportChart('expanded-mission-distribution-chart-var')" />
    </p:panel>
</p:dialog>

导出图表的javascript（我必须使用与Primefaces展示中使用的方法不同的方法，因为兼容性目的）：

function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }

  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

function exportChart(chart) {
// Exportando o gráfico como uma imagem.
var image = PF(chart).exportAsImage();

var fileName = "image.png";
var src = image.getAttribute('src');
var type = 'image/png';
var b64Data = src.split(',')[1];

var blob = b64toBlob(b64Data, type);
var link = document.createElement("a");

if (link.download !== undefined) { // feature detection
    // Browsers that support HTML5 download attribute
    link.setAttribute("href", window.URL.createObjectURL(blob));
    link.setAttribute("download", fileName);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
} else {
    alert('Chart export only works in Chrome (v20+), Firefox (Gecko v13+), IE (v10+), Safari (v6+) and Opera (v12.10+).');
}

对话框中的图表图片： Pie chart inside my dialog

导出图表的图像： Exported pie chart

互联网上没有任何相似之处，这可能是造成这个问题的原因吗？

为什么在导出饼图或折线图时会出现标签位移？

0 个答案: