如何使用dc.js创建多行图表 [英] how to create multiline chart using dc.js
问题描述
我使用Dimensional Charting javascript库dc.js制作多折线图，该库基于d3和crossfilter。我是新的在dc.js库。我试图显示多行图表使用csv file.i无法理解如何创建多行图表csv格式后。
I'm making a multi line chart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. i am new in dc.js library.i am trying to display the multiline chart using csv file.i cant understand how to create multiline chart following csv format.
my csv栏格式为
my csv column format is
Age_19_Under Age_19_64 Age_65_84 Age_85_and_Over
26.9 62.3 9.8 0.9
23.5 60.3 14.5 1.8
24.3 62.5 11.6 1.6
24.6 63.3 10.9 1.2
24.5 62.1 12.1 1.3
24.7 63.2 10 2.2
25.6 58.5 13.6 2.4
24.1 61.6 12.7 1.5
24.8 59.5 13.5 2.2
我尝试下面的代码：
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<head>
<link href="{% static 'css/dc.css' %}" rel="stylesheet" media="screen">
<link href="{% static 'css/example-styles.css' %}" rel="stylesheet" media="screen">
</head>
<div class="container" style="margin-top: 140px">
<div class="col-lg-12" id="chart-row-Poverty1">
</div>
</div>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/crossfilter.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dc.js' %}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
<script type="text/javascript" src="{% static 'js/index.js' %}"></script>
<script type="text/javascript">
var lineChart1=dc.compositeChart("#chart-row-Poverty1");
var g;
d3.csv("{% static 'sampledata/helthdata.csv' %}", function(error, experiments) {
var dateFormat = d3.time.format("%Y");
var numberFormat = d3.format(",f");
var ndx = crossfilter(experiments);
var all = ndx.groupAll();
var runDimension = ndx.dimension(function(d) {return [+d.Age_19_Under, +d.Age_19_64, +d.Age_65_84,+d.Age_85_and_Over]; });
var runGroup = runDimension.group().reduceSum(function(d) { return 1; });
lineChart1.width(1160)
.height(250)
.margins({top: 10, right: 10, bottom: 20, left: 40})
.dimension(runDimension)
.group(runGroup)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function(d){
return "\nNumber of Povetry: "+d.key;
})
.x(d3.scale.linear().domain([4, 27]))
.xAxis();
dc.renderAll();
});
</script>
{% endblock %}
推荐答案
有助于将维度视为您希望沿X轴和组查看的值，因为您希望将X轴上任何一个坐标的数据分组为一个Y值。这样，一个组表示多线图上一行的数据。一旦你已经计算出来，你需要在dc.js中创建N + 1个图表。也就是说，一个lineChart你想要看到的每个图形，然后一个compositeChart将它们聚集在一起。单独的lineCharts可以很简单，因为他们将从它们包含的compositeChart继承很多属性。
It can help to think of the dimension as being the values you want to see along the X-axis and the groups as being how you want the data for any one coordinate on the X-axis grouped together into a single Y value. In this way, one group represents the data for one line on your multiline graph. Once you've got that worked out then you need to create N+1 charts in dc.js. That is, one lineChart for each graph you want to see and then one compositeChart to gather them all together. The individual lineCharts can be pretty simple because they'll inherit many properties from the compositeChart they're contained in.
直到我把下面的代码放在一起我注意到你为X轴设置的实际值，意识到我认为我可能误解了你真正想做的事情。对于那个很抱歉。希望它仍然会为你展示基本的想法。
It wasn't until I finished putting together the code below I noticed the actual values you set for the X axis and realized that I think I may have misinterpreted what you are really trying to do. Sorry about that. Hopefully it will still illustrate the fundamental ideas for you.
var experiments = [
{ Run: 1, Age_19_Under: 26.9, Age_19_64: 62.3, Age_65_84: 9.8, Age_85_and_Over: 0.9 },
{ Run: 2, Age_19_Under: 23.5, Age_19_64: 60.3, Age_65_84: 14.5, Age_85_and_Over: 1.8 },
{ Run: 3, Age_19_Under: 24.3, Age_19_64: 62.5, Age_65_84: 11.6, Age_85_and_Over: 1.6 },
{ Run: 4, Age_19_Under: 24.6, Age_19_64: 63.3, Age_65_84: 10.9, Age_85_and_Over: 1.2 },
{ Run: 5, Age_19_Under: 24.5, Age_19_64: 62.1, Age_65_84: 12.1, Age_85_and_Over: 1.3 },
{ Run: 6, Age_19_Under: 24.7, Age_19_64: 63.2, Age_65_84: 10, Age_85_and_Over: 2.2 },
{ Run: 7, Age_19_Under: 25.6, Age_19_64: 58.5, Age_65_84: 13.6, Age_85_and_Over: 2.4 },
{ Run: 8, Age_19_Under: 24.1, Age_19_64: 61.6, Age_65_84: 12.7, Age_85_and_Over: 1.5 },
{ Run: 9, Age_19_Under: 24.8, Age_19_64: 59.5, Age_65_84: 13.5, Age_85_and_Over: 2.2 },
];
var ndx = crossfilter(experiments);
var all = ndx.groupAll();
var runDimension = ndx.dimension(function (d) { return d.Run; });
var age19UnderGroup = runDimension.group().reduceSum(function (d) { return d.Age_19_Under; });
var age19To64Group = runDimension.group().reduceSum(function (d) { return d.Age_19_64; });
var age65To84Group = runDimension.group().reduceSum(function (d) { return d.Age_65_84; });
var age85AndOverGroup = runDimension.group().reduceSum(function (d) { return d.Age_85_and_Over; });
lineChart1.width(1160)
.height(250)
.margins({ top: 10, right: 10, bottom: 20, left: 40 })
.dimension(runDimension)
.transitionDuration(500)
.elasticY(true)
.brushOn(false)
.valueAccessor(function (d) {
return d.value;
})
.title(function (d) {
return "\nNumber of Povetry: " + d.key;
})
.x(d3.scale.linear().domain([4, 27]))
.compose([
dc.lineChart(lineChart1).group(age19UnderGroup),
dc.lineChart(lineChart1).group(age19To64Group),
dc.lineChart(lineChart1).group(age65To84Group),
dc.lineChart(lineChart1).group(age85AndOverGroup)
])
;
dc.renderAll();
请注意，如何在数据中插入运行属性以创建维度的统一值。我选择了整数，因为它们很容易，但值也可以是日期，实验名称，或者在数据中创建一行。数据集中的值直接显示在图表中，因为我对维度的选择具有所有唯一值。如果存在重复的值（例如，第10行，Measurement = 9，每个年龄范围的值为10），则给定维度值的所有数据都将通过.reduceSum（）方法汇总在一起（因此，对于X轴上的9为34.8）。
Notice how I inserted a "Run" property in your data to create a unifying value for the dimension. I chose integers because they're easy, but the values could just as well be dates, or names of experiments, or whatever it is that creates a row in your data. The values in your data set show up directly in the graph because my choice of dimension has all unique values. Had there been repeated values (say a 10th row with Measurement = 9 and a value of 10 for each age range) then all the data for a given dimension values would have been summed together by the .reduceSum() method (so, a value of 34.8 for 9 on the X-axis).
这篇关于如何使用dc.js创建多行图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
