Я хочу поместить в 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-файл в браузере, я вижу это.
Как сделать диаграмму для каждой строки данных? Я хочу, чтобы каждая диаграмма (каждый год) показывала доли Демов, Республиканской партии и других.
@ rioV8 Как бы выглядел такой код?
дайте divs id
, например c0
, c1
, ... и привяжите к этому имени id
, foreach даст вам индекс, если хотите.
type
является частью объекта data
, а для bindto
требуется символ #
. Как может класс быть gauge-chart
, если вы установите его на chart
?
@ rioV8 Обновил мой вопрос
ты не применил мое первое замечание
@ rioV8 Какой? Можете ли вы опубликовать ответ, показывающий, как должен выглядеть мой код?
кусок текста до "и"
Спасибо. Я снова отредактировал код, чтобы отразить ваше предложение. Появляются диаграммы датчиков, но они больше похожи на радугу. Однако это отдельная проблема, над которой мне нужно работать. Если вы хотите отметить свой ответ, не стесняйтесь опубликовать его, и я отмечу его.
возможно, вам понадобится диаграмма pie
или donut
, или диаграмма любого другого типа, см. примеры
добавьте новый
div
для каждого необходимого датчика и установите стиль их отображения наinline-block
. Как подключить образец датчика кdiv#chart
?