javascript - 融合图表 multilevelpie 文本 chop/重叠问题

Question

我使用了“multilevelpie”图表。由于图表中的数据较少(比如 10 或 1)，标签名称正在与另一个合并。

我已附上截图和消息，请考虑并给我一个解决方案

请检查 JsFiddle 重新生成的问题.. & 我也附上了图片，奇怪的错误

Js Fiddle example

FusionCharts.ready(function () {
var topProductsChart = new FusionCharts({
    type: 'multilevelpie',
    renderAt: 'chart-container',
    id : "myChart",
    width: '500',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Split of Top Products Sold",
            "subCaption": "Last Quarter",
            "captionFontSize": "14",
            "subcaptionFontSize": "14",
            "baseFontColor" : "#333333",
            "baseFont" : "Helvetica Neue,Arial",   
            "basefontsize": "9",
            "subcaptionFontBold": "0",
            "bgColor" : "#ffffff",
            "canvasBgColor" : "#ffffff",
            "showBorder" : "0",
            "showShadow" : "0",
            "showCanvasBorder": "0",
            "pieFillAlpha": "60",
            "pieBorderThickness": "2",
            "hoverFillColor": "#cccccc",
            "pieBorderColor": "#ffffff",
            "useHoverColor": "1",
            "showValuesInTooltip": "1",
            "showPercentInTooltip": "0",
            "numberPrefix": "$",
            "plotTooltext": "$label, $$valueK, $percentValue"
        },
        "category": [
            {
                "label": "Sales by category",
                "color": "#ffffff",
                "value": "150",
                "category": [
                    {
                        "label": "Food & {br}Beverages",
                        "color": "#f8bd19",
                        "value": "55.5",
                        "category": [
                            {
                                "label": "Breads",
                                "color": "#f8bd19",
                                "value": "11.1"
                            },
                            {
                                "label": "Juice",
                                "color": "#f8bd19",
                                "value": "27.75"
                            },
                            {
                                "label": "Noodles",
                                "color": "#f8bd19",
                                "value": "19.99"
                            },
                            {
                                "label": "Seafood",
                                "color": "#f8bd19",
                                "value": "0"
                            }
                        ]
                    },
                    {
                        "label": "Apparel &{br}Accessories",
                        "color": "#e44a00",
                        "value": "42",
                        "category": [
                            {
                                "label": "Sun Glasses",
                                "color": "#e44a00",
                                "value": "62.08"
                            },
                            {
                                "label": "Clothing",
                                "color": "#e44a00",
                                "value": "18.9"
                            },
                            {
                                "label": "Handbags",
                                "color": "#e44a00",
                                "value": "6.3"
                            },
                            {
                                "label": "Shoes",
                                "color": "#e44a00",
                                "value": "6.72"
                            }
                        ]
                    },
                    {
                        "label": "Baby {br}Products",
                        "color": "#008ee4",
                        "value": "22.5",
                        "category": [
                            {
                                "label": "Bath &{br}Grooming",
                                "color": "#008ee4",
                                "value": "9.45"
                            },
                            {
                                "label": "Feeding",
                                "color": "#008ee4",
                                "value": "16.3"
                            },
                            {
                                "label": "Diapers",
                                "color": "#008ee4",
                                "value": "76.75"
                            }
                        ]
                    },
                    {
                        "label": "Electronics",
                        "color": "#33bdda",
                        "value": "30",
                        "category": [
                            {
                                "label": "Laptops",
                                "color": "#33bdda",
                                "value": "8.1"
                            },
                            {
                                "label": "Televisions",
                                "color": "#33bdda",
                                "value": "10.5"
                            },
                            {
                                "label": "SmartPhones",
                                "color": "#33bdda",
                                "value": "11.4"
                            }
                        ]
                    }
                ]
            }
        ]
    }
});

    topProductsChart.render();
});

Answer 1

让我们指出我们在这里的担忧:

• 问题 1:如果 dataValue 为 0，则图表中不应该有标签。
• 解决方案:可能存在一种哲学，即如何获取零数据和缺失数据的上下文。假设我有一个值为 0 的类别，并且我将其从图表中删除，如何设置存在所有数据的上下文。无论如何为了这个需求，我们可能会想到一个dataRefiner()，它只是提炼出数据源中的零和空数据。 :)

---

• 问题 2:文本重叠。
• 解决方案:目前FusionCharts好像不支持ML饼图的文字重叠管理。 :'( 但我绝对可以完成我脑海中出现的变通办法。让我们动手吧!!!
• 解决方案 1: 将 {br} 标记附加到标签，使其断开线条并容纳在弧中。在非常薄的切片中没有多大用处。
• 解决方案 2:将数据标签 font-size 缩小到刚好可以容纳的范围。 Docs可能会有用。
• 解决方案 3:访问内部图形标签并旋转它。注意事项:访问内部图形元素没有 FusionCharts 的官方支持。

---

创建一个解决方法以适应 avobe 提到的一些修复。此代码与 FC 3.11.0 兼容。扩展对以下内容的支持:

• enableSmartLabels
• manageLabelOverflow
• useEllipsesWhenOverflow

现在甚至在MultiLevel Pie charts .在 FusionCharts 原生支持之前，这是一个临时的近似解决方法。

运行以下代码片段或使用 fiddle :

/*
 Recursively removes the data containing falsy values.
 @param data {Object} - The original data.
 @return {Object} - The refined data.
*/
function dataRefiner(data) {
  var i,
    category = data.category,
    len = category && category.length;
  for (i = 0; i < len; i += 1) {
    elem = category[i];
    if (elem.category) {
      dataRefiner(elem);
    } else if (!Number(elem.value)) {
      category.splice(i, 1);
      i -= 1;
      len -= 1;
    }
  }
  return data;
}
var overlapManager = (function() {
  return function(chartRef, dataSet) {
    var jsonData = chartRef.getJSONData(),
      chartAttrs = jsonData.chart;
    if (Number(chartAttrs.enablesmartlabels) === 0 || Number(chartAttrs.managelabeloverflow) === 0) {
      return;
    }
    /*
     * Returns the point to point distance for two points.
     * @return {Number}
     */
    function dist_point(point1, point2) {
      var math = Math;
      return math.sqrt((math.pow((point1.x - point2.x), 2)) + (math.pow((point1.y - point2.y), 2)))
    }

    /*
     * given a radius, center, and two ends of a chord.
     * return: {
        inner: Coordinate of the dipped point on the inner circle.
        outer: coordinate of the dipped point on the outer circle. 
     }
    */
    function give_dips(center_circle, angle, innerRadius, outerRadius) {
      var math = Math,
        res = {
          inner: {},
          outer: {}
        },
        getExtreme = function(radius) {
          return {
            x: center_circle.x + (radius * math.cos(angle)),
            y: center_circle.y - (radius * math.sin(angle))
          }
        };

      if (center_circle) {
        res.inner = getExtreme(innerRadius);
        res.outer = getExtreme(outerRadius);
      }
      return res;
    }

    /*
     * Manages the overlapping of the texts in ML pie chart.
     * @params: elem - {Object} - Internal store for the graphic and configurations.
     * @params: chartRef - {Object} - The reference for the chart.
     */
    function wrapText(elem, chartRef) {
      var conf = elem && elem.config || {},
        smartLabel = chartRef.jsVars.instanceAPI.linkedItems.smartLabel,
        jsonData = chartRef.getJSONData(),
        chart = jsonData.chart,
        useEllipsesWhenOverflow = chart && !!Number(chart.useellipseswhenoverflow),
        math = Math,
        graphics = elem && elem.graphics,
        ringpath = graphics.element && graphics.element.attr('ringpath') || [],
        center_circle = {
          x: ringpath[0],
          y: ringpath[1]
        },
        innerRadius = ringpath[3],
        outerRadius = ringpath[2],
        strechAngle = conf.angleStrech,
        angle = (2 * math.PI) - conf.startAngle - (strechAngle / 2),
        dipPoints = give_dips(center_circle, angle, innerRadius, outerRadius),
        center = {
          x: (dipPoints.inner.x + dipPoints.outer.x) / 2,
          y: (dipPoints.inner.y + dipPoints.outer.y) / 2
        },
        textObj,
        radius = math.min(dist_point(center, center_circle) * math.sin(strechAngle / 2) - (conf.borderWidth || 0),
          dist_point(center, dipPoints.inner)),
        offset = radius * math.cos(math.PI / 4),
        side = math.sqrt(2) * radius;
      smartLabel.useEllipsesOnOverflow(useEllipsesWhenOverflow);
      textObj = smartLabel.getSmartText(conf.displayValue, side, side);
      if (graphics.label && graphics.label.getBBox().width > side) {
        (innerRadius !== 0) && graphics.label
          .attr({
            text: textObj.text,
          });
      }
    }

    if (!dataSet) {
      dataSet = chartRef.jsVars.instanceAPI.components.dataset[0];
    }
    var data = dataSet.components.data || [],
      len = data.length,
      i;

    for (i = 0; i < len; i += 1) {
      // recursively traverse the graphical objects.
      overlapManager(chartRef, data[i]);
    }
    wrapText(dataSet, chartRef);
  }
})();
FusionCharts.ready(function() {
  topProductsChart = new FusionCharts({
    type: 'multilevelpie',
    renderAt: 'chart-container',
    id: "myChart",
    width: '500',
    height: '500',
    dataFormat: 'json',
    dataSource: dataRefiner(data),
    events: {
      "rendered": function(e, a) {
        if (FusionCharts.version.join('.') !== '3.11.0') {
          // It access the internal architechural properties of fusioncharts which might change in future release.
          console.log('overlapManager() is a work around supported for FusionCharts 3.11.0 and might not work in this version.');
        }
        overlapManager(e.sender);
      }
    }
  });

  topProductsChart.render();
});

var topProductsChart,
  data = {
    "chart": {
      "useEllipsesWhenOverflow": "1",
      "caption": "Split of Top Products Sold",
      "subCaption": "Last Quarter",
      "captionFontSize": "14",
      "subcaptionFontSize": "14",
      "baseFontColor": "#333333",
      "baseFont": "Helvetica Neue,Arial",
      "basefontsize": "9",
      "subcaptionFontBold": "0",
      "bgColor": "#ffffff",
      "canvasBgColor": "#ffffff",
      "showBorder": "0",
      "showShadow": "0",
      "showCanvasBorder": "0",
      "pieFillAlpha": "60",
      "pieBorderThickness": "2",
      "hoverFillColor": "#cccccc",
      "pieBorderColor": "#ffffff",
      "useHoverColor": "1",
      "showValuesInTooltip": "1",
      "showPercentInTooltip": "0",
      "numberPrefix": "$",
      "plotTooltext": "$label, $$valueK, $percentValue"
    },
    "category": [{
      "label": "Sales by category",
      "color": "#ffffff",
      "value": "150",
      "category": [{
        "label": "Food & {br}Beverages",
        "color": "#f8bd19",
        "value": "55.5",
        "category": [{
          "label": "Breads",
          "color": "#f8bd19",
          "value": "11.1"
        }, {
          "label": "Juice",
          "color": "#f8bd19",
          "value": "27.75"
        }, {
          "label": "Noodles",
          "color": "#f8bd19",
          "value": "19.99"
        }, {
          "label": "Seafood",
          "color": "#f8bd19",
          "value": "0"
        }]
      }, {
        "label": "Apparel &{br}Accessories",
        "color": "#e44a00",
        "value": "42",
        "category": [{
          "label": "Sun Glasses",
          "color": "#e44a00",
          "value": "62.08"
        }, {
          "label": "Clothing",
          "color": "#e44a00",
          "value": "18.9"
        }, {
          "label": "Han",
          "color": "#e44a00",
          "value": "6.3"
        }, {
          "label": "Shoes",
          "color": "#e44a00",
          "value": "6.72"
        }]
      }, {
        "label": "Baby {br}Products",
        "color": "#008ee4",
        "value": "22.5",
        "category": [{
          "label": "Bath & Grooming",
          "color": "#008ee4",
          "value": "9.45"
        }, {
          "label": "Feeding",
          "color": "#008ee4",
          "value": "16.3"
        }, {
          "label": "Diapers",
          "color": "#008ee4",
          "value": "76.75"
        }]
      }, {
        "label": "Electronics",
        "color": "#33bdda",
        "value": "30",
        "category": [{
          "label": "Laptops",
          "color": "#33bdda",
          "value": "8.1"
        }, {
          "label": "Televisions",
          "color": "#33bdda",
          "value": "10.5"
        }, {
          "label": "SmartPhones",
          "color": "#33bdda",
          "value": "11.4"
        }]
      }]
    }]
  };

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- 
    Sales by category shown using Multi-level Pie Chart.
-->
<div id="chart-container">FusionCharts will render here</div>

您也可以引用融合 treeMap chart来表示树和分层数据。