jqplot - jqPlot Pie Renderer 混合数据标签

Question

我正在使用jqPlot 的 PieRenderer创建自定义饼图。我唯一的问题是我可以在 dataLabels 上显示标签或百分比。我想做一个混合并显示两者都喜欢<label>\n<percentage>。解释：

通过设置this.dataLabels = 'percent'，我可以这样做：

通过设置this.dataLabels = 'label'，我可以这样做：

我想做这个：

你有什么想法？

Answer 1

根据源码，dataLabels不支持label同时渲染percent。

我认为您可以使用 JavaScript 轻松创建标签列表，并确保使用<br/>而不是\n为每个部分呈现 2 行。

Answer 2

@sza 的解决方案更整洁，所以我将不得不接受它。我想发布我自己的，因为它更容易并且可能对某人有所帮助。我所做的是，将两个pieCharts放在一起，第一个是可见的并且具有百分比值，而第二个没有填充并且除了标签之外是不可见的。

我的 XHTML 代码：

<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
    title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
    diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
    seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
    title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
    diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
    seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />

扩展器.js：

function pieChartExtender() {
    this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
    this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
    this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
    this.cfg.seriesDefaults.rendererOptions.startAngle = -90;

}
function pieChartLabelExtender() {
    this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
    this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
    this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}

CSS 文件：

.chartContainer {
    position:relative;
    margin: 0 auto;
    top: 10px;
    width: 350px;
    height: 350px;
}
.chartLegend {
    border: 1px solid #d7d7d8;
    margin: 40px 40px;
    width: 80%;
}
.pieExtra {
    position:absolute;
    left: 17px;
    top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }

请注意：

• 两者pieCharts（称为pieLabels和mainPieChart）都是绝对定位的，以便彼此放置
• jqplot-data-labelofpieLabels放置在上方 9px 和jqplot-data-labelofmainPieChart放置在下方 8px 以创建 label-percentage 标签
• jqplot-series-canvasforpieLabels不显示，以使其不可见。