个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我必须为网站创建饼图。在我看来，我无法根据我需要的数量动态渲染饼图。最多我必须渲染 28。所以，我想我必须输入
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Gaming Consoles Sold in 2012"
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type: "pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ y: 4181563, indexLabel: "PlayStation 3" },
{ y: 2175498, indexLabel: "Wii" },
{ y: 3125844, indexLabel: "Xbox 360" },
{ y: 1176121, indexLabel: "Nintendo DS"},
{ y: 1727161, indexLabel: "PSP" },
{ y: 4303364, indexLabel: "Nintendo 3DS"},
{ y: 1717786, indexLabel: "PS Vita"}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
这段代码出现了28次。但是，有时我不需要全部 28 个饼图。所以我想如果不需要的话我可以隐藏饼图。但是，主要问题是，“我可以动态分配canvasJS饼图”吗？所以我只有一个主要代码块可以创建 X 数量的饼图。
最佳答案
明白了。所以按照我原来的评论。我在数据部分对 2 元组变量进行了硬编码，只是为了让基本想法运行起来。所以没有使用可变数据。但是，我只是简单地创建了一系列图表。命名约定为pieContainer+i。在我的 html 代码中。我有 29 个 div 元素，约定为ieContainer+1。
var charts = [];
var data = [];
function populatePieCharts(size)
{
for (i = 0; i < size; i++)
{
console.log("FFFF" + i)
charts[i] = new CanvasJS.Chart("pieContainer" + i,
{
title: {
text: i
},
legend: {
maxWidth: 350,
itemWidth: 120
},
data: [
{
type:"pie",
showInLegend: true,
legendText: "{indexLabel}",
dataPoints: [
{ y: 4181563, indexLabel: "PlayStation 3" },
{ y: 2175498, indexLabel: "Wii" },
{ y: 3125844, indexLabel: "Xbox 360" },
{ y: 1176121, indexLabel: "Nintendo DS" }
]
}]
});
}
renderCharts(size)
}
function renderCharts(chartAmount)
{
console.log(charts.length);
for (i2 = 0; i2 < chartAmount; i2++)
{
charts[i2].render();
console.log(i2);
}
}
这让我又迈出了一步。而不是对 29 个 div 元素进行硬编码。我可能可以根据所需的饼图动态创建 div 元素。
关于javascript - CanvasJS 和多个饼图。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47677074/
25
4
0
有人可以帮我理解为什么我的饼图百分比计算不正确吗？看截图: 根据我的计算，如 RHS 上所示，支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我正在制作圆环饼图。 我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)
我是一名优秀的程序员,十分优秀！