Question

我想在div中放置多个仪表图，但是我不确定该怎么做。

这里是index.html。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>U.S. presidential vote, 1972-2016, by race</title>

    <!-- Load c3.css -->
    <link href="css/c3.min.css" rel="stylesheet">

    <!-- Load d3.js and c3.js -->
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script src="js/c3.min.js"></script>

    <script type="text/javascript">
        var dataDir = "vote-by-race";
        d3.csv(dataDir+"/white.csv").then(function(data){
            data.forEach(function(d,i){
                var chartDiv = document.createElement("div");
                chartDiv.id = "chart"+i;
                chartDiv.setAttribute("display","inline-block");
                document.getElementById("charts-container").appendChild(chartDiv);

                var chart = c3.generate({
                    data: {
                        json: d
                    },
                    type: "gauge",
                    bindto: '#'+chartDiv.id
                });
            });
        });
    </script>
</head>
<body>
    <div id="charts-container"></div>
</body>
</html>

这是我正在使用的CSV。

YEAR,DEMOCRAT,REPUBLICAN,OTHER
1972,32,66,2
1976,47,52,1
1980,35,56,9
1984,35,64,1
1988,40,59,1
1992,39,40,21
1996,43,46,11
2000,42,54,4
2004,41,58,1
2008,43,55,2
2012,39,59,2
2016,37,58,5

但是当我在浏览器中打开HTML文件时，我看到了。

如何为每行数据制作一个量表？我希望每个计量表（每年）都显示Dems，GOP等的比例。

如何在C3.js中制作多个仪表图？

0 个答案: