चार्ट.जेएस: घटता के बजाय सीधी रेखाएं

Question

मैं एक डाटासेट की योजना बनाने के लिए Chart.JS का उपयोग कर रहा हूँ,

हालाँकि मुझे एक सहज प्रभाव मिला!

यहाँ वह वक्र है जो मुझे मिला है:

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

function plotChart(data, labels) {

    var lineChartData = {
        "datasets": [{
            "data": data,
            "pointStrokeColor": "#fff",
            "fillColor": "rgba(220,220,220,0.5)",
            "pointColor": "rgba(220,220,220,1)",
            "strokeColor": "rgba(220,220,220,1)"
        }],
        "labels": labels
    };

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);

}

वक्रों के बजाय मेरी सीधी रेखाएँ कैसे हो सकती हैं?

धन्यवाद

Answer 1

संस्करण 1 का समाधान (पुराने चार्ट संस्करण)

Chartjs.org पर प्रलेखन के अनुसार

आप 'bezierCurve' विकल्पों में सेट कर सकते हैं और चार्ट बनाते समय इसे पास कर सकते हैं।

bezierCurve: false

उदाहरण के लिए:

var options = {
    //Boolean - Whether the line is curved between points
    bezierCurve : false
};
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData, options);

संस्करण 2 के लिए अद्यतन

वैश्विक विकल्पों में लाइन विन्यास के लिए अद्यतन प्रलेखन के अनुसार

Name        Type    Default Description
tension     Number  0.4     Default bezier curve tension. Set to 0 for no bezier curves.

उदाहरण के लिए:

var options = {
    elements: {
        line: {
            tension: 0
        }
    }
};

और सीधे डेटासेट संरचना में भी lineTension0 (शून्य) पर सेट करके ।

Property        Type    Usage
lineTension     Number  Bezier curve tension of the line. Set to 0 to draw straightlines. 
                        This option is ignored if monotone cubic interpolation is used. 
                        Note This was renamed from 'tension' but the old name still works.

इन विशेषताओं का उपयोग करके एक उदाहरण डेटा ऑब्जेक्ट नीचे दिखाया गया है।

var lineChartData = {
    labels: labels,
    datasets: [
        {
            label: "My First dataset",
            lineTension: 0,           
            data: data,
        }
    ]
};

Comments

आपको bezierCurve: falseएक सीधी रेखा प्राप्त करने की आवश्यकता है। सच (डिफ़ॉल्ट) आप एक (bezier) वक्र देता है

— potatopeelings 4

नए v2.0 के साथ, ऐसा करने के लिए, अब आप सेट करते हैं tension:0।

— स्कोजोमोडेना

के अनुसार नवीनतम दस्तावेज , का उपयोग करें lineTensionके बजाय सिर्फ 'तनाव' की

— Sphro

Answer 2

वांछित वक्र सेट करने के लिए आप लाइनटेन्शन विकल्प का उपयोग कर सकते हैं। सीधी रेखाओं के लिए 0 सेट करें। आप 0-1 के बीच एक नंबर दे सकते हैं

data: {
    datasets: [{
        lineTension: 0
    }]
}

Comments

धन्यवाद, यह मेरे लिए इसे ठीक करता है v2.7.1

— mfink

Answer 3

मैंने वक्र की चिकनाई निर्धारित करने के लिए लाइन टेंशन का उपयोग किया है।

से डॉक्स : lineTension एक नंबर, लाइन की बेज़ियर वक्र तनाव प्राप्त करता है। सीधी रेखाएँ खींचने के लिए 0 पर सेट करें। यदि मोनोटोन क्यूबिक प्रक्षेप का उपयोग किया जाता है तो इस विकल्प को अनदेखा किया जाता है।

बस विभिन्न मूल्यों के साथ परीक्षण करना सुनिश्चित करें कि आप कितनी चिकनी रेखा चाहते हैं।

उदाहरण के लिए:

var data = {
  labels: ["Jan", "Feb", "Mar"],
  datasets: [{
      label: "Label 1",
      lineTension: 0.2
    }, {
      label: "Stock B",
      lineTension: 0.2
    }

  ]
};

Comments

2020 में यह सही जवाब है

— jbnunn

Answer 4

मुझे लगता है कि इसे अपडेट कर दिया गया है lineTension। डॉक्स की जाँच करें ।