问CanvasJS和多个片段。
EN

Stack Overflow用户

提问于 2017-12-06 14:48:33

回答 1查看 197关注 0票数 1

我必须为一个网站创建饼图。在我看来，根据我需要的数量，我无法动态地呈现饼图。我最多只能画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个饼图。

javascript

asp.net-mvc

回答 1

Stack Overflow用户

发布于 2017-12-06 16:23:00

明白了。所以按照我最初的评论。我在数据部分硬编码了两个元组变量，只是为了获得运行的基本思想。因此，不使用变量数据。但是，我只是简单地创建了一系列图表。在我的html代码中使用pieContainer+i的命名约定。我有29个div元素和常规的pieContainer+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元素。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47677074

复制

相似问题

问CanvasJS和多个片段。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CanvasJS和多个片段。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CanvasJS和多个片段。
EN