मेरी सीएसवी सामग्री इस तरह दिखती है:

date,average,maximum,minimum
2017-01-01,0.02963,0.05595
2017-01-02,0.02929,0.05566
2017-01-03,0.02921,0.05579
2017-01-04,0.02920,0.05682
2017-01-05,0.02942,0.06489
2017-01-06,0.02971,0.07201
2017-01-07,0.02861,0.05390
2017-01-08,0.02820,0.05243
2017-01-09,0.02896,0.05203
2017-01-10,0.04215,0.24689
2017-01-11,0.02853,0.05130
2017-01-12,0.02777,0.05065
2017-01-13,0.02769,0.05022
2017-01-14,0.02723,0.04985

मैं एरियारेंज (अधिकतम और न्यूनतम का उपयोग करके) और लाइन (औसत) के साथ एक हाईचार्ट्स एकाधिक श्रृंखलाग्राफ तैयार करना चाहता हूं। लेकिन मैं तारीख को एक्स अक्ष मानों के रूप में लिखने में सक्षम नहीं हूं।

अब तक, मैंने निम्नलिखित उदाहरण के साथ प्रयास किया: https://www.highcharts.com/demo/ एरियारेंज-लाइन

यहाँ मेरा कोड है:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body onload="test()">
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
function test() 
{
        var c=[];
        var ranges = [];
        var averages = [];
        var current = [];
        var reference = [];
        $.get('data.csv', function(data) 
        {
            var lines = data.split('\n');
            for(i=1;i<lines.length; i++) 
            {
                var items = lines[i].split(',');
                c.push(items[1]);
                ranges.push([items[0],items[2],items[3]]);
                averages.push([items[0],items[1]]);
            }

        });

Highcharts.chart('container', {

    title: {
        text: 'July Data'
    },

    xAxis: {    
        categories: c
     },

    yAxis: {
        title: {
            text: 'Value'
        }
    },

    tooltip: {
        crosshairs: true,
        shared: true,
        valueSuffix: 'mm/day'
    },

    legend: {
    },

    series: [{
        name: 'Average',
        data: averages,
        zIndex: 1,
        marker: {
            fillColor: 'white',
            lineWidth: 2,
            lineColor: Highcharts.getOptions().colors[0]
        }
    }, 
    {
        name: 'Climatology',
        data: ranges,
        type: 'arearange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[0],
        fillOpacity: 0.3,
        zIndex: 0,
        marker: {
            enabled: false
        }
    }]
});
};
</script>
</body>
0
nishanuw 21 जुलाई 2017, 22:16

2 जवाब

सबसे बढ़िया उत्तर

जैसा कि के। रोहडे ने देखा, आपके डेटा में एक कॉलम (शायद औसत) की कमी है और आपके सभी y मान संख्याएं होनी चाहिए, स्ट्रिंग नहीं। साथ ही, यदि x मान दिनांक हैं तो आपको श्रेणियों का उपयोग करने की आवश्यकता नहीं है। बस, xAxis के प्रकार को 'डेटाटाइम' में बदलें और इस तरह आपको अतिरिक्त श्रेणी सरणी (c) बनाने और भरने की आवश्यकता नहीं है।

<pre id="csv" style="display:none">date,average,maximum,minimum
2017-01-01,0.04,0.02963,0.05595
2017-01-02,0.04,0.02929,0.05566
2017-01-03,0.04,0.02921,0.05579
2017-01-04,0.04,0.02920,0.05682
2017-01-05,0.04,0.02942,0.06489
2017-01-06,0.04,0.02971,0.07201
2017-01-07,0.04,0.02861,0.05390
2017-01-08,0.04,0.02820,0.05243
2017-01-09,0.04,0.02896,0.05203
2017-01-10,0.1,0.04215,0.24689
2017-01-11,0.04,0.02853,0.05130
2017-01-12,0.04,0.02777,0.05065
2017-01-13,0.04,0.02769,0.05022
2017-01-14,0.04,0.02723,0.04985</pre>

एपीआई संदर्भ:
http://api.highcharts.com/highcharts/xAxis.type

उदाहरण:
http://jsfiddle.net/ez1as425/ - सही किया गया डेमो
http://jsfiddle.net/g6mojLdm/ - डेटाटाइम प्रकार के साथ xAxis

0
pawel_d 24 जुलाई 2017, 17:07

आपके कोड में कुछ समस्याएं हैं। आप संशोधित संस्करण के लिए यहां फिडल देख सकते हैं।

सबसे पहले, आपके सीएसवी डेटा में 4 कॉलम निर्दिष्ट हैं, लेकिन डेटा में केवल तीन कॉलम हैं। मैंने डेमो के लिए कुछ नकली औसत डेटा जोड़ा।

दूसरा, आपकी श्रेणियाँ c को items[1] पर सेट किया गया था, हालांकि items[0] में आपके दिनांक मान शामिल थे।

अंत में, अपने सीएसवी डेटा को चार्ट करने योग्य टुकड़ों में पार्स करते समय, आपको विभाजित मानों (एक स्ट्रिंग होने के नाते) को Number में बदलने की आवश्यकता होती है।

0
K. Rohde 24 जुलाई 2017, 11:08