我刚开始使用图表,因为我知道我需要三图图表(使用React的highcharts库)。我正在尝试为我的图表构建一个算法,具有树图类型,但没有成功。我将附上我需要做的事情的图像,也许有人可以帮助我做到这一点?image找到解决方案,以适当的方式建立图表
ukdjmx9f1#
这是正确的,你需要建立你的自定义算法来创建设计的图表。例如,你可以添加另一个子点,并将其作为父点。下面的例子:
function customAlgorithm(parent, children) { const childrenAreas = []; const isSecondLevel = children[0].level === 2; let x = 0; children.forEach((child, index) => { const height = isSecondLevel ? parent.height / 2 : parent.height; const y = isSecondLevel ? parent.height / 2 : 0; if (isSecondLevel && index === 0) { childrenAreas.push({ x: 0, y: 0, width: parent.width, height: parent.height / 2 }); } else { const width = isSecondLevel ? parent.width * (child.val / (parent.val - children[0].val)) : parent.width * (child.val / parent.val); childrenAreas.push({ x, y, width, height }); x += width; } }); return childrenAreas; } Highcharts.seriesTypes.treemap.prototype.customAlgorithm = customAlgorithm;
字符串
现场演示:https://jsfiddle.net/BlackLabel/z5v4wfme/密码:https://www.highcharts.com/docs/chart-and-series-types/treemap
1条答案
按热度按时间ukdjmx9f1#
这是正确的,你需要建立你的自定义算法来创建设计的图表。例如,你可以添加另一个子点,并将其作为父点。下面的例子:
字符串
现场演示:https://jsfiddle.net/BlackLabel/z5v4wfme/
密码:https://www.highcharts.com/docs/chart-and-series-types/treemap