Chart.js: কার্ভগুলির পরিবর্তে সরল রেখা

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 এর সমাধান (পুরানো চার্ট সংস্করণ)

চার্টজএস.আর.জে ডকুমেন্টেশন অনুসারে

আপনি বিকল্পগুলিতে 'বেজিয়ার কারভে' সেট করতে পারেন এবং আপনি যখন চার্টটি তৈরি করবেন তখন এটি পাস করতে পারেন।

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একটি সরল রেখা পাওয়া দরকার। সত্য (ডিফল্ট) আপনাকে একটি (

— বেজিয়ার

এটি করতে নতুন v2.0 সহ, আপনি এখন সেট করুন tension:0।

— scojomodena

থেকে acording সর্বশেষ দলিল , ব্যবহার করুন lineTensionপরিবর্তে শুধু 'টান' এর

— Sphro

Answer 2

কাঙ্ক্ষিত বক্ররেখা সেট করতে আপনি লাইন টেনশন বিকল্পটি ব্যবহার করতে পারেন। সরল রেখার জন্য 0 সেট করুন। আপনি 0-1 এর মধ্যে একটি নম্বর দিতে পারেন

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

Comments

ধন্যবাদ, এটি আমার জন্য এটি v2.7.1 এ স্থির করে

— mfink

Answer 3

আমি বক্ররেখার মসৃণতা সেট করতে লাইনটেনশন ব্যবহার করেছি।

দস্তাবেজগুলি থেকে : লাইনটেনশন লাইনের বেজিয়ার বক্ররেখা একটি সংখ্যা গ্রহণ করে tension সরল রেখা আঁকতে 0 তে সেট করুন। মনোোটোন কিউবিক ইন্টারপোলেশন ব্যবহার করা হলে এই বিকল্পটিকে অগ্রাহ্য করা হবে।

আপনি লাইনটি কতটা মসৃণ চান তা কেবল বিভিন্ন মান দিয়ে পরীক্ষা করার বিষয়টি নিশ্চিত করুন।

উদাহরণ স্বরূপ:

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

  ]
};

Answer 4

আমি মনে করি এটি আপডেট হয়েছে lineTension। দস্তাবেজগুলি পরীক্ষা করুন ।