dc.js

मैं आयामी चार्टिंग का उपयोग कर एक बहु लाइन चार्ट बना रही हूँ का उपयोग कर बहु चार्ट बनाने के लिए कैसे जावास्क्रिप्ट पुस्तकालय dc.js, जो डी 3 और crossfilter पर आधारित है। मैं dc.js लाइब्रेरी में नया हूं। मैं csv फ़ाइल का उपयोग कर मल्टीलाइन चार्ट को प्रदर्शित करने की कोशिश कर रहा हूं। मैं समझ नहीं पा रहा हूं कि csv प्रारूप के बाद मल्टीलाइन चार्ट कैसे बनाएं।dc.js

मेरी सीएसवी स्तंभ प्रारूप है

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

मैं कोशिश कर रहा हूँ foolowing कोड:

{% 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 %}

स्रोत

2014-04-12 pramod24

यह मदद कर सकते हैं मानों आप X- अक्ष पर देखना चाहता हूँ होने के रूप में आयाम के बारे में सोचना और समूहों के रूप में आप X-axis पर किसी एक समन्वय के लिए डेटा को एक ही वाई मान में समूहित करना चाहते हैं। इस तरह, एक समूह आपके मल्टीलाइन ग्राफ पर एक पंक्ति के लिए डेटा का प्रतिनिधित्व करता है। एक बार जब आप इसे काम कर लेंगे तो आपको डीसीजे में एन + 1 चार्ट बनाना होगा। यही है, प्रत्येक ग्राफ़ के लिए एक पंक्ति चार्ट जिसे आप देखना चाहते हैं और फिर एक समग्र चार्ट उन सभी को इकट्ठा करने के लिए चार्ट करें। व्यक्तिगत लाइन चार्ट बहुत सरल हो सकते हैं क्योंकि वे संयुक्त चार्ट से कई गुणों का उत्तराधिकारी होंगे।

यह तब तक नहीं था जब तक मैंने नीचे दिए गए कोड को एक साथ रखना समाप्त नहीं किया, मैंने देखा कि एक्स अक्ष के लिए आपके द्वारा निर्धारित वास्तविक मान और महसूस किया कि मुझे लगता है कि मैंने गलत व्याख्या की हो सकती है कि आप वास्तव में क्या करने की कोशिश कर रहे हैं। उसके लिए माफ़ करना। उम्मीद है कि यह अभी भी आपके लिए मौलिक विचारों को चित्रित करेगा।

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();

सूचना कैसे मैं अपने डेटा में "रन" संपत्ति आयाम के लिए एक एकीकृत मान बनाने के लिए डाला। मैंने पूर्णांक चुना क्योंकि वे आसान हैं, लेकिन मूल्यों की तारीखें, या प्रयोगों के नाम, या जो कुछ भी हो, वह आपके डेटा में एक पंक्ति बना सकता है। आपके डेटा सेट में मान सीधे ग्राफ में दिखाई देते हैं क्योंकि आयाम की मेरी पसंद में सभी अद्वितीय मान हैं। था वहाँ दोहराया गया मान तो एक दिया आयाम मान के लिए सभी डेटा .reduceSum (द्वारा एक साथ अभिव्यक्त किया गया होता) विधि (हां, एक मूल्य (जैसे मापन = 9 और प्रत्येक आयु वर्ग के लिए 10 का एक मूल्य के साथ एक 10 वीं पंक्ति) एक्स-अक्ष पर 9.8 के लिए 34.8)।

स्रोत

2014-04-20 20:03:28

मेरे लिए काम नहीं कर रहा रचना .. किसी भी विचार क्यों। मुझे अज्ञात फ़ंक्शन मिल गया है –

@ डिलीप - वास्तविक कोड को देखे बिना कहना मुश्किल है। एक सामान्य बात यह है कि मैं कह सकता हूं कि यदि आप उपर्युक्त उदाहरण में एक जैसे तरीके से चेन कर रहे हैं तो ऑर्डर मायने रख सकता है क्योंकि, जैसा कि मुझे याद है, विधियां सभी एक ही ऑब्जेक्ट प्रकार को वापस नहीं करती हैं। सोचने के जाल में गिरना आसान है कि '.compose()' को 'लाइन चार्ट 1' पर बुलाया जा रहा है जब इसे वास्तव में कॉल से वापस आने वाले किसी भी चीज़ पर कॉल किया जा रहा है।'x() '। –

यदि आपको कोई त्रुटि मिलती है जो एक फ़ंक्शन नहीं है, तो सुनिश्चित करें कि आप मूल चार्ट प्रकार को समग्र चार्ट पर सेट करते हैं। (। पूर्व वर lineChart1 = dc.compositeChart ("# चार्ट पंक्ति-Poverty1");) तो फिर तुम प्रत्येक तर्क आप की रचना करने के लिए दे पर अलग-अलग चार्ट प्रकार को परिभाषित कर सकते हैं। –

उत्तर

संबंधित मुद्दे