【问题标题】:Percentages on Slices of ZingChart Pie ChartZingChart 饼图切片的百分比
【发布时间】:2016-02-10 00:10:06
【问题描述】:

(我曾经问过类似的问题,但问题又出现了。)

我有一个使用 ZingCharts 的非常简单的饼图,但即使 ZingCharts 网站上的所有示例都显示每个切片的百分比,我也无法显示百分比。请注意,我使用的是值框。我正在使用来自 CDN 的最新版本的 ZingCharts:https://cdn.zingchart.com/zingchart.min.js

请注意,我正在寻找显示在切片上的百分比,而不是在值框中,它是通过一行附加到每个切片的文本。

这是我的代码:

<div id="pie-chart">&nbsp;</div>

<script>
var slices = var slices = slices = [
    {"values":[59],"text":"USA"},
    {"values":[55],"text":"UK"}
];

var chartData = {
    "type":"pie",
  "plot":{
    "value-box":{
      "visible":true,
      "placement":"out",
      "text":"%t (%v)"
    }
  },
    "series": slices
};

zingchart.render({
        id:"pie-chart",
        data: chartData,
        height:400,
        width:"100%"
    });
</script>

我想使用标准饼图,而不是更多效果的饼图。

【问题讨论】:

标签: zingchart


【解决方案1】:

要在图表上显示百分比值,您需要使用%npv(节点百分比值)标记而不是显示原始值的%v。饼图类型页面中的更多信息:http://www.zingchart.com/docs/chart-types/pie/

请注意,值框的默认功能是

       "value-box" : {
          "placement" : "in",
          "text" : "%npv%"
       }

因此,您可以选择从 JSON 中省略它。在下面的示例中,我已明确显示带有选项的 JSON。

var slices = [
  {"values":[59],"text":"USA"},
  {"values":[55],"text":"UK"}
];
var chartData = {
    "type":"pie",
    "series": slices,
    "plot" : {
       "value-box" : {
          "placement" : "in",
          "text" : "%npv%"
       }
     }
};

zingchart.render({
        id:"pie-chart",
        data: chartData,
        height:400,
        width:"100%"
    });
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<div id="pie-chart"></div>

【讨论】:

  • 我不是在询问出现在值框中的百分比(文本与每个切片由一行分隔),而是让百分比出现在切片上。仅使用 %npv 只会更改值框。
  • 您的 json 中的值框将展示位置设置为“out”。将其更改为“in”,值框应出现在切片上。您使用的是哪个版本的 ZingChart?在 v2.2.0+ 中,百分比默认显示在每个饼图上。
  • 谢谢。我不知道“进”与“出”的位置。我正在使用我假设最新版本,因为我正在访问 CDN 托管脚本。刚刚检查:2.2.2。这就是奇怪的地方。 ZingChart 网站上的每个示例都显示了出现在切片和它们显示的 JS 中的百分比,没有配置设置,但我无法重新创建它。
  • 迈克。谢谢。有什么办法可以同时进出,所以百分比显示在里面,文本/值显示在外面?
  • 无法在内部和外部显示值框。但是,您可以通过使用标签和属性挂钩来模拟此功能,将标签放置在每个饼图切片上:jsfiddle.net/rprwea56/1。 %npv 在标签文本上不可用,因此您必须手动输入。您还可以使用特殊标记从标签中获取节点的值,但百分比必须在饼图之外:jsfiddle.net/hkrwc36k
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多