FAQ中心
页面树结构

版本比较

旧版本 7

changes.mady.by.user 张晓霞

保存于

比较

新版本 当前版本

changes.mady.by.user 陈艳

保存于

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

...

问题

         饼图如何设置数据标签显示名称，数值，百分比，并且数值保留两位小数

           

...

解决方案

        1、先设置图形的数据标签为【显示】：

         

         2、增加宏修改数据标签效果：


类型对象事件
ClientSidechartafterRenderer


          

代码块
linenumberstrue
function main(chartView) {
     var chart = chartView.getChartObject().getChart();
    var option = chartView.getChartObject().getOptions();
    var series = option.series[0].data;
    // 遍历所有标签
    for (var i in series) {
        series[i].label = series[i].label || {};
        series[i].label.normal = series[i].label.normal || {};
        series[i].label.normal.formatter = function(data) {
            debugger;
            var name = data.name;
            var value = data.value;
            // 此处可设置标签格式 例：name：value
            return name + ":(" + data.percent +'%)\n' + value.toFixed(2)+'元';
        };
    }
    chart.setOption(option);
}

...

代码块
linenumberstrue
{
    "series": [{
        "label": {
            "normal": {
                "show": true,
                "position": "outer",
                "formatter": "{b}\n{c}\n{d}%"
            }
        }
    }]
}

 若是需要将名称、数值、百分比同时显示，并且对百分比进行四舍五入，可以使用如下扩展属性： 注：若是需要将名称、数值、百分比同时显示，并且对百分比进行四舍五入，可以使用如下扩展属性：

代码块
linenumberstrue
{
	"series": [{
		"label": {
			"normal": {
				"formatter": "function(arg){return arg.name+': \\n'+arg.value+' \\n '+Math.round(arg.percent)+'% '}"
			}
		}
	}]
}

Viewtracker
renderusernamesfalse



问题

         饼图如何设置数据标签显示名称，数值，百分比，并且数值保留两位小数

           Image Added

解决方案

        1、先设置图形的数据标签为【显示】：

         Image Added

         2、增加宏修改数据标签效果：


类型对象事件
ClientSidechartbeforeRenderer


          Image Added

代码块
linenumberstrue
function main(chartView) {
     //var chart = chartView.getChartObject().getChart();
    var option = chartView.getChartObject().getOptions();
    var series = option.series[0].data;
    // 遍历所有标签
    for (var i in series) {
        series[i].label = series[i].label || {};
        series[i].label.normal = series[i].label.normal || {};
        series[i].label.normal.formatter = function(data) {
            debugger;
            var name = data.name;
            var value = data.value;
            // 此处可设置标签格式 例：name：value
            return name + ":(" + data.percent +'%)\n' + value.toFixed(2)+'元';
        };
    }
    //chart.setOption(option);
}


注：若只是需要将名称、数值、百分比同时显示，对于小数位没有要求，可以使用如下扩展属性：

代码块
linenumberstrue
{
    "series": [{
        "label": {
            "normal": {
                "show": true,
                "position": "outer",
                "formatter": "{b}\n{c}\n{d}%"
            }
        }
    }]
}

 注：若是需要将名称、数值、百分比同时显示，并且对百分比进行四舍五入，可以使用如下扩展属性：

代码块
linenumberstrue
{
	"series": [{
		"label": {
			"normal": {
				"formatter": "function(arg){return arg.name+': \\n'+arg.value+' \\n '+Math.round(arg.percent)+'% '}"
			}
		}
	}]
}

Viewtracker
renderusernamesfalse

...