Question

我想为TreeMap syncfusion脚本添加多个标签

我的代码

https://jsfiddle.net/iwebsmile/Lngmmogb/1/

或

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://js.syncfusion.com/demos/web/scripts/treemapdata.js"></script>
<script type="text/javascript" src="https://cdn.syncfusion.com/15.2.0.46/js/web/ej.web.all.min.js "></script> 
<script type="text/javascript">
  var population_data = [
    { Continent: "Asia", Region: "Southern Asia", Population: 10 },
    { Continent: "Asia", Region: "Eastern Asia", Population: 20 },
    { Continent: "Asia", Region: "South-Eastern Asia", Population: 60 },
    { Continent: "Asia", Region: "Western Asia", Population: 5 },
    { Continent: "Asia", Region: "Central Asia", Population: 5 }
  ]
</script>
<div id="treemapContainer" style="width: 700px; height: 430px;"></div>  
<script type="text/javascript">
  jQuery(function ($) {
    $("#treemapContainer").ejTreeMap({
      dataSource: population_data,
      weightValuePath: "Population",
      colorValuePath: "Population",
      rangeColorMapping: [
        { color: "#DC562D", from: "0", to: "10" },
        { color: "#FED124", from: "10", to: "25" },
        { color: "#487FC1", from: "25", to: "52" },
        { color: "#0E9F49", from: "52", to: "70" }
      ],
      leafItemSettings: { labelPath: "Region", showLabels:true },
      showTooltip:true,
      tooltipTemplate:'template'
    });
  });
</script>

如何在div中显示Region和Continent

在线：26

leafItemSettings: { labelPath: "Region", showLabels:true },

尝试：labelPath：“Region，Continent”，......错误！

Answer 1

您可以按如下方式创建一个级别：

<script type="text/javascript">
  jQuery(function ($) {
    $("#treemapContainer").ejTreeMap({
      dataSource: population_data,
      weightValuePath: "Population",
      colorValuePath: "Population",
      rangeColorMapping: [
        { color: "#DC562D", from: "0", to: "10" },
        { color: "#FED124", from: "10", to: "25" },
        { color: "#487FC1", from: "25", to: "52" },
        { color: "#0E9F49", from: "52", to: "70" }
      ],
      leafItemSettings: { labelPath: "Region", showLabels:true },
      showTooltip:true,
      tooltipTemplate:'template',
      levels: [{
             groupPath: "Continent",
             groupGap: 5,
             headerHeight: 25,
             showHeader: true
         }]
    });
  });
</script>

fiddler：https://jsfiddle.net/Lngmmogb/35/

将多个标签从json添加到TreeMap

1 个答案: