彩票走势图

JavaScript图表工具FusionCharts入门教程(36):帕累托图

翻译|使用教程|编辑:杨鹏连|2020-09-10 09:48:21.390|阅读 280 次

概述:帕累托图以Vilfredo Pareto命名,是一种将柱形图和折线图结合起来的图表。帕累托图中的数据值由列表示,这些列以降序排列。这些值的累积总计由向上的弯曲线显示。帕累托图用于隔离问题的关键原因。它们也可以用于确定成功的关键因素。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XTPowerCharts XTFusionWidgets XTFusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案,目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

点击下载FusionCharts最新版

帕累托图以Vilfredo Pareto命名,是一种将柱形图和折线图结合起来的图表。帕累托图中的数据值由列表示,这些列以降序排列。这些值的累积总计由向上的弯曲线显示。帕累托图用于隔离问题的关键原因。它们也可以用于确定成功的关键因素。

左垂直轴或主轴显示发生频率,成本或其他重要的度量单位。右垂直轴或辅助轴显示总出现次数,总成本或特定度量单位总数的累计百分比。

帕累托图

注意:单击下面的气泡以了解有关不同图表组件的更多信息。

JavaScript图表工具FusionCharts入门教程(36):帕累托图

标题(也称为图表标题)是图表的标题,您可以为标题添加自定义文本,以及配置其字体属性和外观。

  • 在此处 了解如何添加字幕 。
  • 字体属性和标题的修饰符也可以使用属性来自定义,请在此处详细了解 。
  • 您还可以自定义标题的对齐方式。在此处了解更多信息 。
可用的两种帕累托图是:
  • 帕累托2D
  • 帕累托3D
帕累托2D


在此示例中,让我们创建一个pareto 2D图表,以按员工各自报告的原因显示其迟到情况。y轴主要显示每月出现的员工人数,y轴显示累积百分比。

要在2D模式下创建Pareto图表,请执行以下步骤:将type属性设置为pareto2d。

  • 在JSON数据中,以"": ""格式设置属性及其对应的值。
  • 使用type属性指定图表类型。要渲染pareto 2D图表,请设置pareto2d。
  • 使用renderAt属性设置容器对象。
  • 使用width和height属性指定图表的尺寸。
  • 使用dataFormat属性设置要传递给图表对象的数据类型(JSON / XML)。
有关属性的详细列表,请参阅多系列pareto 2D图表的图表属性页面。


上面的代码在2D中的pareto图表如下所示:


JavaScript图表工具FusionCharts入门教程(36):帕累托图
帕累托3D


要以3D渲染pareto图表,请将type属性的值从更改pareto2D为pareto3D。其余数据结构保持不变。

有关属性的详细列表,请参阅多系列pareto 3D图表的图表属性页面。

一个简单的Pareto 3D图表如下所示:

JavaScript图表工具FusionCharts入门教程(36):帕累托图

上面两个图表的数据是单个系列。提供的值仅适用于柱状图。该线的百分比值会自动计算并添加到图表中。

显示值的线系列

默认情况下,不呈现折线图的自动生成的百分比值。要指定折线图的百分比数据值,请将showLineValues属性设置为1。

请参阅下面给出的代码:

{
  "chart": {
    "showLineValues": "1"
  },
}
配置为呈现折线图的百分比值的pareto图表如下所示:



JavaScript图表工具FusionCharts入门教程(36):帕累托图

自定义线数据集

在pareto图表中,您可以自定义渲染线条的外观。下面给出的化妆品可用于自定义线数据集。
  • 将十六进制颜色代码设置为lineColorattribute,以指定渲染线的颜色。
  • 使用lineThinkness属性指定线条的粗细(以像素为单位)。
  • 使用lineAlpha属性设置线段的透明度。此属性采用介于0(透明)和100(不透明)之间的值。
  • 将lineDashedattribute 的值设置为,1以将线段呈现为虚线。将此属性设置为0会将它们渲染为整行。
  • 如果线段显示为虚线,请使用lineDashLen属性设置每个破折号的长度。
  • 如果线段显示为虚线,请使用lineDashGap属性设置每个破折号之间的间距。
请参阅下面给出的代码:
{
    "chart": {
        "lineColor": "#8e0000",
        "lineThickness": "2",
        "lineAlpha": "80",
        "lineDashed": "1",
        "lineDashLen": "5",
        "lineDashGap": "3"
    },
}
具有自定义线段的pareto图表如下所示:



JavaScript图表工具FusionCharts入门教程(36):帕累托图

隐藏辅助轴值


根据使用情况,按照以下步骤隐藏pareto图的次要y轴:

  • 指定showSecondaryLimits属性以设置辅助y轴的上限和下限。将此属性设置为0将隐藏限制,而将其设置为1(默认)将显示限制。
  • 指定showDivLineSecondaryValue属性以设置是否显示辅助y轴的分界线值。将此属性设置为0将隐藏值,而将其设置为1(默认)将显示它们。
请参阅下面给出的代码:


{
  "chart": {
    "showSecondaryLimits": "0",
    "showDivLineSecondaryValue": "0"
  },
}
具有隐藏的辅助y轴的pareto图表如下所示:
JavaScript图表工具FusionCharts入门教程(36):帕累托图



想要购买FusionCharts Suite XT正版授权,或了解更多产品信息请点击


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP