Question

我必须为网站创建饼图。在我看来，根据我需要的数量，我无法动态渲染饼图。在最大值我必须渲染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个饼图。

Answer 1

知道了。所以按照我原来的评论。我在数据部分硬编码了2元组变量，只是为了让基本思想运行起来。所以没有使用可变数据。但是，我只是简单地创建了一系列图表。使用pieContainer + i的命名约定。在我的HTML代码中的位置。我有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元素。

CanvasJS和多个饼图。

1 个答案: