时间戳

首页 > 解决方案 > 如何在 C3.js 中制作多个仪表图？

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

问题描述

我想将多个仪表图放在一个 中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 和其他人的部分。

标签： javascriptd3.jsc3.js

解决方案

推荐阅读