JavaScript图表工具FusionCharts建立一个优秀的树形图

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

慧都网免费下载FusionCharts最新版

树映射是使用树数据结构创建的信息树的直观表示。它显示为2D嵌套矩形，代表树数据的节点和叶子以及它们之间的关系。

一个简单的树形图如下所示：

树形图应用

使用树形图显示使用树形结构显示的层次结构信息。例如，您可以使用树形图显示系统的文件夹结构。您还可以使用它来研究大型数据集中的模式和出现情况，因为颜色和大小尺寸是相关的。

树形图图表

在下面给出的图像中，您可以看到信息树如何转换为树图：

æ ‘çŠ¶å›¾

如何建立一个良好的树形图

  • 结构化数据，使其仅具有一个根元素。
  • 用矩形的颜色表示尺寸，趋势或与关键值的偏差。
  • 将最里面的矩形表示为叶节点。此矩形的面积始终与分配给该叶子的数据值成比例。
  • 避免嵌套不是叶子的节点。这些矩形的面积不太重要。
  • 要构建理想的树图，请将宽高比保持为1。

树形图应利用屏幕上的最大空间。如果您有效地管理可用空间，则可以在树图中绘制数千个项目。

有关树形图的重要概念

平铺

切片是一个过程，通过该过程树形图将大矩形划分为较小的子矩形。理想情况下，树图切片算法可创建纵横比接近于1的矩形，并根据基础数据树进行排序。

但是，这些属性具有相反的关系。您需要在优化放置顺序和长宽比之间进行选择。当优化长宽比时，放置的顺序变得难以预测。另一方面，如果稳定放置顺序，则纵横比会降低。因此，您可以对切片算法进行分类，例如：

  • 支持低长宽比
  • 支持高稳定性
  • 尝试在两者之间取得平衡

宽高比

宽高比（尤其是最里面的矩形）是树形图中最重要的约束之一。如果宽高比高，则树形图将具有细矩形，这是很难比较的。在理想情况下，树形图的宽高比预计为1，一眼看去，嵌套的矩形就是易于比较的正方形。

在实际的用例中，长宽比永远不会精确地为1，但是有些算法会通过权衡顺序来尝试将其保持为1。

在下表中，您可以看到常用算法以及使用它们时必须进行的权衡：

 

算法  订购  长宽比
切片切丁 已订购  很高 
平方的  没订购  最低


您可以使用的其他算法包括：

 

  • 二叉树
  • 混合树图

目前，FusionCharts树图仅支持切片和切块以及平方算法。在将来的版本中将考虑支持更多算法。

互动与树图

相互作用模型（原样）

树形图的基本交互模型包括以下内容：

  • 左键单击：在树图上单击矩形时，树将向下移动。根节点更改为被单击的节点，仅绘制被单击节点的子树。如果无法遍历树，则模型将以静默方式失败。
  • 右键单击：右键单击树图上的矩形时，树将向上移动。根节点将替换为其直接祖先的节点。如果无法遍历树，则模型将以静默方式失败。
  • 悬停：将鼠标指针悬停在树图上的矩形上时，将突出显示属于该节点的完整子树。
  • 图例：您可以在树图中合并可选的渐变图例以过滤节点。

FusionCharts树图交互模型

FusionCharts实现以下模型与树形图进行交互：

初期阶段
要向下钻取到叶节点，请直接单击该节点。例如，单击北部区域中的任何节点以更改图表视图。
然后，要返回上一级，请单击视图标题中的“北部区域”，或单击图表右上角的“返回父级”按钮。您也可以直接回到初始阶段。为此，请单击图表右上角的“返回顶部”按钮。

æ ‘çŠ¶å›¾GIF-1

创建一个简单的树形图

当您需要分析层次结构信息时，树形图很有用。您可以比较树形图的2D嵌套矩形，以快速从数据中获取见解。要呈现一个树形图的图表，包括所提到的项目文件夹与.js文件的其余fusioncharts.treemap.js这里。

使用以下属性来构建简单的树形图：

  • 使用type属性将图表类型设置为treemap。
  • 使用该renderAt属性指定将在其中呈现图表的容器对象。
  • 使用该width属性设置图表的宽度（以像素为单位）。
  • 使用该height属性设置图表的高度（以像素为单位）。
  • 使用dataFormat属性设置格式，数据将以这种格式传递给chart对象。请注意，此属性可以接受两组不同值中的任何一个- json（将呈现图表的JSON数据传递给该dataSource属性）和jsonurl（将.json文件的相对路径传递给该dataSource属性）或xml和xmlurl。
  • 使用dataSource属性来指定图表将从其获取数据的源，具体取决于传递给该dataFormat属性的值。
  • 使用caption属性指定图表标题。
  • 使用subCaption属性指定图表子标题。
  • 使用该label属性可以指定数据项的标签。此属性的值呈现在特定项目的矩形内。
  • 使用该value属性可以为特定数据项设置矩形（节点）的面积。
  • 使用sValue属性指定数据项的辅助值。此值用于设置colorRange矩形（节点）的颜色（基于使用对象定义的颜色范围）。

上面显示的树状图将销售团队在本年度的表现与上一年的表现进行了比较。单击一个矩形以将节点替换为当前的根节点。例如，单击北部区域中的任何矩形（节点）以更改图表视图，如下图所示：

æ ‘çŠ¶å›¾GIF-2

呈现一个梯度传说

您可以使用渐变图例渲染树状图，渐变图例是从colorRange定义派生的混合颜色窗格。您可以使用一对可拖动的指针绘制线性比例。这样，您为数字范围定义的每种颜色都将在其端点处混合到下一种颜色，从而形成渐变条。渐变比例尺上的每个点将代表唯一的颜色和值。因此，图表中所有不同的值将根据其在渐变标度上的位置以唯一的颜色显示。

使用以下属性来渲染带有渐变图例的树图：

  • 将showLegend属性的值设置为1，以显示图例。
  • 将gradient属性的值设置为1，以显示渐变图例。请注意，要渲染渐变图例，您必须将showLegend和gradient属性的值都设置为1。
  • 将startLabel属性的值设置为渐变图例比例的下限。
  • 将endLabel属性的值设置为渐变图例比例的上限。

除了上面详述的属性外，您还需要在该color对象下设置其他3个属性（在下面详细说明）的值，该属性定义渐变图例比例的颜色范围。

  • code对于渐变图例比例上的颜色范围，将属性的值设置为十六进制颜色代码。
  • 将maxValue属性值设置为渐变图例比例尺上颜色范围的上限。请注意，此限制包括您分配给该属性的值。
  • 将label属性值设置为渐变图例比例尺上颜色范围的标签内容。请注意，该值将在此颜色范围内的所有节点的工具提示文本中呈现。

请参考下面的代码：

{
    "chart": {
        ...
    },
    "data": [{
        ...
    }],
    "colorrange": {
        "mapbypercent": "1",
        "gradient": "1",
        "minvalue": "-25",
        "code": "e24b1a",
        "startlabel": "Decline",
        "endlabel": "Rise",
        "color": [{
            "code": "ffffff",
            "maxvalue": "0",
            "label": "Static"
        }, {
            "code": "6da81e",
            "maxvalue": "25",
            "label": "AVERAGE"
        }]
    }
}

渐变图例如下图所示：

æ¸å˜ä¼ å¥‡

使用梯度图例显示/隐藏数据值

您可以使用交互式渐变图例来过滤特定值范围内的节点。拖动比例指针以设置所需的下限和上限。

与梯度图例集合A样品树状图中仅示出具有值的（分配给这些节点sValue的属性）之间-10和10下面的图像中被示出。

请注意，未落入此括号的节点全部变为灰色。

æ ‘çŠ¶å›¾GIF-3

单击此处以获取树图支持的属性的完整列表。

对于树形图设置拼接算法

平铺是将大矩形划分为较小的子矩形的过程。理想情况下，树图切片算法可创建纵横比接近1的矩形，并根据基础数据/信息树进行排序。

切片算法会影响将较大的矩形划分为较小的子矩形的方式，从而影响图表的外观。FusionCharts支持以下算法：

使用正方化算法

树形图的平方算法在视觉上很吸引人，部分原因是节点靠近square形状，但这是以无序节点为代价的。但是，由于存在，您可能更喜欢使用平方算法而不是切片和骰子算法low aspect ratio，这意味着您可以轻松比较子节点。

将algorithm属性的值设置为squarified，以将后者用作切片算法。
请参考下面的代码：

{
    "chart": {
        "algorithm": "squarified"
    }
}

使用切片和切块算法

在树形图中，切片和切块切片算法是最简单的算法之一，并且在保持数据排序的同时提供了出色的稳定性。但是，要权衡的是它的高宽比，导致将树形图绘制为细矩形，这很难比较。

不过，如果您想使用此算法，请使用以下属性。请注意，您可以在3种不同的模式下使用此算法。
将algorithm属性的值设置为sliceanddice。
将属性的值设置为slicingMode要用于图表的模式：

  • vertical：在此模式下，从第1层开始，将第n层的所有节点垂直分割，将第n + 1层的节点水平分割。
  • horizontal：在此模式下，从第1层开始，将第n层的所有节点水平切片，将第n + 1层的节点垂直切片。
  • alternate：在此模式下，矩形将在同一级别上交替切片。

查找每种切片模式的示例，如下所示：

垂直模式

在下面给出的图表中，您可以看到制造商的节点（例如Toyota Group，BMW Group）是垂直切片的，而其子节点是水平切片的。
请参考下面的代码：

 

{
    "chart": {
        "algorithm": "sliceanddice",
        "slicingmode": "vertical"
    }
}

该图表如下图所示：

水平模式

要将切片模式设置为horizontal，请参考以下代码：

{
    "chart": {
        "algorithm": "sliceanddice",
        "slicingmode": "horizontal"
    }
}

备用模式

将切片模式设置为时alternate，请参考以下代码：

{
    "chart": {
        "algorithm": "sliceanddice",
        "slicingmode": "alternate"
    }
}

配置树形图

使用FusionCharts Suite XT，您可以配置树状图的功能。您可以通过多种方式自定义树形图。例如，您可以：

  • 设置平铺算法（确定如何将图表划分为节点）。
  • 启用/禁用使用导航栏来遍历图表。
  • 设置节点的自定义颜色。
  • 自定义图表画布中的所有文本。
  • 分别自定义数据标签。
  • 设置发光效果，依此类推。

渲染遍历路径导航栏

在树形图中，导航栏显示一个遍历路径，您可以通过单击该路径来返回任何已遍历的父级。

将showNavigationBar属性的值设置为1，以在树图上显示导航栏。条形图可以显示遍历的路径，并提供单击即可切换到任何遍历的父级的功能。否则，它还可以提供返回到上一个工具栏（只能用于返回上一步）或返回到根级别的功能。

请参考下面的代码：

 

{
    "chart": {
        "showNavigationBar": "1"
    }
}

上方的树状图显示了截至2015年按洲分列的全球人口及其识字率。

当您单击子节点时，被单击的节点及其子树将替换当前的根节点。例如，当您单击“东南亚区域”下的任何节点时，图表视图将变为下图所示。请注意，所有父节点在导航栏中都是可见的，您可以通过单击它们直接切换到其中的任何一个。

æ ‘çŠ¶å›¾GIF-4

颜色树形图数据图

在数据驱动的树图中，您可以使用颜色范围根据其值来定义数据图的颜色。对于树形图，可以定义数据绘图颜色：

  • 自动根据colorRange对象的数据值。
  • 手动使用fillColor属性。

请参考下面的代码：

{
    "chart": {
        ...
    },
    "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
            "label": "Samsung",
            "fillcolor": "838986",
            "value": "2217",
            "data": [{
                ...
            }]
        }]
    }],
    "colorrange": {
        ...
        "color": [{
            ...
        }]
    }
}

到目前为止使用的样本树图中的数据图颜色已使用colorRange对象分配。使用colorRangeobject定义渐变图例的数字范围。然后，您可以根据sValue属性值在数字范围内的位置为数据图分配颜色。

自定义个人数据图

使用以下属性来自定义单个数据图：

  • 使用fillColor属性设置用于数据绘图的颜色的十六进制代码。
  • 使用fontColor属性设置用于数据绘图标签的颜色的十六进制代码。

自定义单个数据图的字体颜色。其他定制（如字体系列或字体大小）在单个数据图级别上不可用。
请参考下面的代码：

{
    "chart": {
        ...
    },
    "data": [{
        "label": "Top Selling Brands",
        "fillcolor": "595f5d",
        "value": "5800",
        "data": [{
            "label": "Samsung",
            "fillcolor": "838986",
            "value": "2217",
            "data": [{
                "label": "Galaxy Note 4",
                "value": "519",
                "sValue": "1.09",
                "fillColor": "1b7ac7"
            }{
                ...
            }]
        }]
    }],
    "colorrange": {
        ...
        "color": [{
            ...
        }]
    }
}

自定义图表文字

使用以下属性可自定义图表画布中的所有文本，包括所有标题和子标题：

  • 使用baseFont属性设置文本的字体系列。
  • 使用baseFontSize属性设置文本的字体大小。
  • 使用baseFontColor属性设置文本颜色的十六进制代码。

基本字体属性会影响图表上的所有文本，包括所有标题和子标题。
请参考下面的代码：

{
    "chart": {
        "baseFont": "Arial",
        "baseFontSize": "11",
        "baseFontColor": "59605e"
    }
}

自定义数据标签

使用以下属性仅自定义图表中的数据标签：

  • 使用labelFont属性设置标签文本的字体系列。
  • 使用labelFontSize属性设置标签文本的字体大小。
  • 使用labelFontColor属性设置标签文本颜色的十六进制代码。
  • 通过将labelFontBold属性的值设置为，以粗体格式显示标签文本1。
  • 通过将labelFontItalic属性的值设置为，以斜体格式显示标签文本1。

标签字体属性仅影响图表上的数据标签。

{
    "chart": {
        "labelFont": "Arial",
        "labelFontSize": "12",
        "labelFontColor": "ff0000",
        "labelFontBold": "1",
        "labelFontItalic": "1"
    }
}

数据标签应用发光效果

您可以将与标签字体颜色不同的背景色应用于数据标签，从而产生发光效果。当数据标签的字体颜色和矩形的填充颜色相同或相似时，这很有用，当使用渐变图例渲染图表时会发生这种情况。

使用以下属性来自定义数据标签的发光效果：

  • 将labelGlow属性的值设置为1，以启用发光效果。
  • 使用labelGlowIntensity属性设置发光效果的强度。
  • 使用labelGlowColor属性设置发光效果颜色的十六进制代码。
  • 使用labelGlowRadius属性设置在标签周围应用发光效果的半径。

请参考下面的代码：

{
    "chart": {
        "labelGlow": "1",
        "labelGlowIntensity": "50",
        "labelGlowColor": "#cccc00",
        "labelGlowRadius": "10"
    }
}

树形图中使用事件

使用FusionCharts Suite XT，您可以通过树图属性为工具提示和渐变图例等项目配置标准交互性。但是，如果需要进一步扩展图表交互性，则可以为此图表引发以下JavaScript事件，然后对它们进行自定义修改：

  • beforeDrillDown当您深入到子节点时，将在呈现图表之前触发该事件。
  • 该drillDown事件被触发后，刚刚当你深入到子节点图表呈现。
  • beforeDrillUp当您向上钻取直接父节点或根节点时，将在呈现图表之前触发该事件。
  • 该drillUp事件被触发后，刚刚当你深入到直接父节点或根节点图表呈现。
  • 在drillDownCancelled当触发事件beforeDrillDown事件被中断。
  • 在drillUpCancelled当触发事件beforeDrillUp事件被中断。

请参考下面的代码：

{
    "chart": {
        "beforeDrillDown": "",
        "drillDown": "",
        "beforeDrillUp": "",
        "drillUp": "",
        "drillDownCancelled": "",
        "drillUpCancelled": ""
    }
}

想要购买FusionCharts Suite XT正版授权，或了解更多产品信息请去慧都网

本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果

posted @ 2020-11-12 16:54  roffey  阅读(768)  评论(0)  编辑  收藏  举报