jqPlot Pie Renderer 混合数据标签答案

【问题标题】：jqPlot Pie Renderer mixed data labelsjqPlot Pie Renderer 混合数据标签
【发布时间】：2013-10-01 16:18:20
【问题描述】：

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

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

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

我想这样做：

你有什么想法吗？

【问题讨论】：

标签： jqplot pie-chart labels

【解决方案1】：

根据source code，dataLabels不支持同时渲染label和percent。

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

【讨论】：

【解决方案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 of pieLabels 放置在上方 9px 处，jqplot-data-label of mainPieChart 放置在下方 8px 处以创建标签百分比标签
不显示pieLabels 的jqplot-series-canvas，以使其不可见。

【讨论】：