jqPlot Pie Renderer混合数据标签

Question

我正在使用jqPlot's PieRenderer创建自定义饼图。我唯一的问题是我可以在dataLabels上显示标签或百分比。我想混合并显示像<label>\n<percentage>这样的内容。说明：

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

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

我想这样做：

你有什么想法吗？

Answer 1

根据source code，dataLabels不支持同时与label一起呈现percent。

我认为您可以使用JavaScript轻松创建标签列表，如果您想为每个部分渲染2行，请确保使用<br/>代替\n。

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" />

extender.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-label pieLabels位于9px以上且jqplot-data-label mainPieChart位于8px以下，以创建标签百分比标签
• jqplot-series-canvas未显示pieLabels，以使其不可见。