Chart.js ব্যবহার করে ডোনাট চার্টের ভিতরে কীভাবে পাঠ্য যুক্ত করবেন?

উত্তর:

40

আপনাকে কোডটি এ জাতীয়: সংশোধন করতে হবে chart.Doughnut.defaults 

labelFontFamily : "Arial",
labelFontStyle : "normal",
labelFontSize : 24,
labelFontColor : "#666"

এবং তারপরে ফাংশনে drawPieSegments

ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);

এই টান দেখুন: https://github.com/nnnick/Chart.js/pull/35

এখানে একটি কার্যকর হ'ল http://jsfiddle.net/mayankcpdixit/6xV78/ একই প্রয়োগ করছে।

— mayankcpdixit
সূত্র
4
এমন কেউ কি আছেন যাঁরা এই অঙ্কনপী সেগমেন্টস ফাংশনটি খুঁজে পাচ্ছেন না?
— ইউুলিয়ান
4
উল্লেখযোগ্য যে এটি v2 এর সাথে কাজ করে না। ব্যবহারের সহজলভ্যতার জন্য অন্তর্ভুক্ত জেফফিড কোডটি ব্যবহার করুন
— অ্যালউইন ক্যাসলার
4
কীভাবে% নতুন লাইনে যুক্ত করবেন? এটি কি সমর্থিত?
— ব্যবহারকারী 7334203
4
তবুও কি এর সমাধান?
— এসিবি
@ অরুণসি.বি - নীচে স্ক্রোল করুন as
— ashleedawg
183

অন্য উত্তরগুলির কোনওটিই পাঠ্যের পরিমাণ এবং ডোনাটের আকারের ভিত্তিতে পাঠ্যের আকার পরিবর্তন করে না। এখানে একটি ছোট স্ক্রিপ্ট রয়েছে যা আপনি মধ্যবর্তী স্থানে যেকোন পরিমাণ পাঠ্য গতিশীল রাখতে ব্যবহার করতে পারেন এবং এটি স্বয়ংক্রিয়ভাবে এটির আকার পরিবর্তন করবে।

উদাহরণ: http://jsfiddle.net/kdvuxbtj/

ডাইনট মাঝখানে ডায়নামিক পাঠ্য সহ

এটি ডোনাটের জন্য নিখুঁত আকারের ডোনাটের কোনও পরিমাণ পাঠ্য লাগবে। প্রান্তগুলি স্পর্শ করা এড়াতে আপনি বৃত্তের অভ্যন্তরের ব্যাসের শতাংশ হিসাবে পার্শ্ব-প্যাডিং সেট করতে পারেন। আপনি যদি সেট না করে থাকেন তবে এটি ডিফল্ট হয়ে যাবে 20। আপনি রঙ, ফন্ট এবং পাঠ্যও বানাবেন। প্লাগইন বাকী যত্ন নেয়।

প্লাগইন কোডটি 30px এর বেস ফন্টের আকার দিয়ে শুরু হবে। সেখান থেকে এটি পাঠ্যের প্রস্থ পরীক্ষা করবে এবং এটি বৃত্তের ব্যাসার্ধের সাথে তুলনা করবে এবং বৃত্ত / পাঠ্য প্রস্থের অনুপাতের ভিত্তিতে এটি পুনরায় আকার দেবে।

এটির ডিফল্ট ন্যূনতম ফন্টের আকার 20px রয়েছে। যদি পাঠ্যটি ন্যূনতম ফন্টের আকারের সীমা অতিক্রম করে, তবে এটি পাঠ্যটি মোড়বে। পাঠ্য মোড়ানোর সময় ডিফল্ট লাইনের উচ্চতা 25px হয় তবে আপনি এটি পরিবর্তন করতে পারেন। আপনি যদি ডিফল্ট ন্যূনতম ফন্টের আকারটিকে মিথ্যাতে সেট করে থাকেন তবে পাঠ্যটি অসীম আকারে ছোট হয়ে যাবে এবং মোড়ানো হবে না।

পর্যাপ্ত পাঠ্য না থাকলে এবং লেটারিংটি খুব বড় হতে পারে এর ক্ষেত্রে এটিতে 75px এর একটি ডিফল্ট সর্বোচ্চ ফন্ট আকারও রয়েছে।

এটি প্লাগইন কোড

Chart.pluginService.register({
  beforeDraw: function(chart) {
    if (chart.config.options.elements.center) {
      // Get ctx from string
      var ctx = chart.chart.ctx;

      // Get options from the center object in options
      var centerConfig = chart.config.options.elements.center;
      var fontStyle = centerConfig.fontStyle || 'Arial';
      var txt = centerConfig.text;
      var color = centerConfig.color || '#000';
      var maxFontSize = centerConfig.maxFontSize || 75;
      var sidePadding = centerConfig.sidePadding || 20;
      var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
      // Start with a base font of 30px
      ctx.font = "30px " + fontStyle;

      // Get the width of the string and also the width of the element minus 10 to give it 5px side padding
      var stringWidth = ctx.measureText(txt).width;
      var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

      // Find out how much the font can grow in width.
      var widthRatio = elementWidth / stringWidth;
      var newFontSize = Math.floor(30 * widthRatio);
      var elementHeight = (chart.innerRadius * 2);

      // Pick a new font size so it will not be larger than the height of label.
      var fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
      var minFontSize = centerConfig.minFontSize;
      var lineHeight = centerConfig.lineHeight || 25;
      var wrapText = false;

      if (minFontSize === undefined) {
        minFontSize = 20;
      }

      if (minFontSize && fontSizeToUse < minFontSize) {
        fontSizeToUse = minFontSize;
        wrapText = true;
      }

      // Set font settings to draw it correctly.
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
      var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
      ctx.font = fontSizeToUse + "px " + fontStyle;
      ctx.fillStyle = color;

      if (!wrapText) {
        ctx.fillText(txt, centerX, centerY);
        return;
      }

      var words = txt.split(' ');
      var line = '';
      var lines = [];

      // Break words up into multiple lines if necessary
      for (var n = 0; n < words.length; n++) {
        var testLine = line + words[n] + ' ';
        var metrics = ctx.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > elementWidth && n > 0) {
          lines.push(line);
          line = words[n] + ' ';
        } else {
          line = testLine;
        }
      }

      // Move the center up depending on line height and number of lines
      centerY -= (lines.length / 2) * lineHeight;

      for (var n = 0; n < lines.length; n++) {
        ctx.fillText(lines[n], centerX, centerY);
        centerY += lineHeight;
      }
      //Draw text in center
      ctx.fillText(line, centerX, centerY);
    }
  }
});

এবং আপনি আপনার চার্ট অবজেক্টে নিম্নলিখিত বিকল্পগুলি ব্যবহার করেন

options: {
  elements: {
    center: {
      text: 'Red is 2/3 the total numbers',
      color: '#FF6384', // Default is #000000
      fontStyle: 'Arial', // Default is Arial
      sidePadding: 20, // Default is 20 (as a percentage)
      minFontSize: 20, // Default is 20 (in px), set to false and text will not wrap.
      lineHeight: 25 // Default is 25 (in px), used for when text wraps
    }
  }
}

এই সমাধানটিতে ব্যবহৃত গণিতের সহায়তার জন্য @ জেনা স্লোয়ানকে ক্রেডিট করুন ।

— বিস্ফোরিত
সূত্র
5
দুর্দান্ত কাজ! কিংবদন্তিটি ডান বা বামে থাকলে বেশিরভাগ অন্যান্য বিকল্পগুলি বিরতি দেয়।
— লুইসভ
4
অসাধারণ সমাধান!
— জাস্টলুকিং
4
আমি আপনার ফিডল আপডেট করেছি এবং একটি সর্বাধিক ফন্টের আকার যুক্ত করেছি: jsfiddle.net/nkzyx50o/3059
— ফেলিক্স
4
একাধিক লাইনে পাঠ্যকে বিভক্ত করা সম্ভব? আমার পাঠ্যের 6 টি শব্দ রয়েছে এবং এটি
— কাটআউটের
4
ধন্যবাদ এটি আমার জন্যও কাজ করে তবে আমি কীভাবে মাল্টি লাইন পাঠ্য যুক্ত করব?
— আশুতোষ শ্রেষ্ঠ
54

এখানে পরিষ্কার এবং উপরোক্ত সমাধানগুলির সম্মিলিত উদাহরণ - প্রতিক্রিয়াশীল (উইন্ডোটি পুনরায় আকার দেওয়ার চেষ্টা করুন), অ্যানিমেশনটি স্ব-প্রান্তিককরণ সমর্থন করে, সরঞ্জামদণ্ডকে সমর্থন করে

https://jsfiddle.net/cmyker/u6rr5moq/

Chart.types.Doughnut.extend({
    name: "DoughnutTextInside",
    showTooltip: function() {
        this.chart.ctx.save();
        Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
        this.chart.ctx.restore();
    },
    draw: function() {
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);

        var width = this.chart.width,
            height = this.chart.height;

        var fontSize = (height / 114).toFixed(2);
        this.chart.ctx.font = fontSize + "em Verdana";
        this.chart.ctx.textBaseline = "middle";

        var text = "82%",
            textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2),
            textY = height / 2;

        this.chart.ctx.fillText(text, textX, textY);
    }
});

var data = [{
    value: 30,
    color: "#F7464A"
}, {
    value: 50,
    color: "#E2EAE9"
}, {
    value: 100,
    color: "#D4CCC5"
}, {
    value: 40,
    color: "#949FB1"
}, {
    value: 120,
    color: "#4D5360"
}];

var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d')).DoughnutTextInside(data, {
    responsive: true
});
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<body>
    <canvas id="myChart"></canvas>
</body>
</html>
স্নিপেট প্রসারিত করুন

আপডেট 17.06.16:

একই কার্যকারিতা কিন্তু চার্ট.জেএস সংস্করণ 2 এর জন্য:

https://jsfiddle.net/cmyker/ooxdL2vj/

var data = {
  labels: [
    "Red",
    "Blue",
    "Yellow"
  ],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ],
      hoverBackgroundColor: [
        "#FF6384",
        "#36A2EB",
        "#FFCE56"
      ]
    }]
};

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx;

    ctx.restore();
    var fontSize = (height / 114).toFixed(2);
    ctx.font = fontSize + "em sans-serif";
    ctx.textBaseline = "middle";

    var text = "75%",
        textX = Math.round((width - ctx.measureText(text).width) / 2),
        textY = height / 2;

    ctx.fillText(text, textX, textY);
    ctx.save();
  }
});

var chart = new Chart(document.getElementById('myChart'), {
  type: 'doughnut',
  data: data,
  options: {
  	responsive: true,
    legend: {
      display: false
    }
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.js"></script>
<canvas id="myChart"></canvas>
স্নিপেট প্রসারিত করুন

— Cmyker
সূত্র
4
আমি Uncaught TypeError: Cannot read property 'extend' of undefinedকোন ধারণা পাচ্ছি ?
— সর্বাধিক রোজ-কলিন্স
4
এছাড়াও, আপনি ctx.fillStyle = 'কালো' ব্যবহার করে পাঠ্যের রঙ পরিবর্তন করতে পারেন;
— অ্যাড্রিয়ান লোপেজ
চার্টটি নতুন ডেটা
— প্যারাম
আপনি কি এর সমাধান বের করতে পেরেছেন?
— Cmyker
@ মাইকার সিএসএস / এইচটিএমএল সমাধান সাহায্য করতে পারে তবে এটি যখন কোনও পিএনজি হিসাবে চার্ট রফতানি করা হয় তখন কেন্দ্রের পাঠ্যটি রফতানি করে না this এটিকে সংশোধন করার জন্য কোনও ধারণা? এটি একটি সম্পূর্ণ সমাধান ছিল কেবল চার্টটি রিফ্রেশ করার পরে এটি কেন্দ্রের অঞ্চলটি সাফ করে না just ।
— techie_28
38

আমি এটি সম্পাদন করার জন্য চার্ট.জেএস কোড সংশোধন করা এড়াতে চাই, যেহেতু এটি নিয়মিত সিএসএস এবং এইচটিএমএল দিয়ে বেশ সহজ। এখানে আমার সমাধান:

এইচটিএমএল:

<canvas id="productChart1" width="170"></canvas>
<div class="donut-inner">
    <h5>47 / 60 st</h5>
    <span>(30 / 25 st)</span>
</div>

সিএসএস:

.donut-inner {
   margin-top: -100px;
   margin-bottom: 100px;
}
.donut-inner h5 {
   margin-bottom: 5px;
   margin-top: 0;
}
.donut-inner span {
   font-size: 12px;
}

আউটপুটটি এর মতো দেখাচ্ছে:

এখানে চিত্র বর্ণনা লিখুন

— ম্যাটিয়াস
সূত্র
5
কেন না? কেবল আপনার ক্লাসে @ মিডিয়া-কোয়েরি যুক্ত করুন।
— ম্যাটিয়াস
4
এটি আমার পক্ষে কার্যকর নয়, আমি একটি প্রতিক্রিয়াশীল উপায় ব্যবহার করছি, তাই আমি স্থির মানগুলি ব্যবহার করতে পারি না। :(
— ম্যাসা
4
@ মাসা আপনি কি বিভিন্ন রেজোলিউশনের জন্য মিডিয়া প্রশ্নগুলি ব্যবহার করার চেষ্টা করেছেন? অথবা px এর পরিবর্তে% ব্যবহার করার জন্য আমি লিখেছি সিএসএস পরিবর্তন করে?
— ম্যাটিয়াস
4
@ মাটিয়াস এটি একটি দুর্দান্ত সমাধান ছিল তবে যখন চার্টটি পিএনজি হিসাবে ডাউনলোড হয় তখন কেন্দ্রীয় পাঠ্য রফতানি হয় না।
— techie_28
4
@ techie_28 বৈধ পয়েন্ট, প্রশ্নটি মোটেও রফতানির উল্লেখ না করায় এটি বিবেচনায় নেয় না।
— ম্যাটিয়াস
22

এটি আমার শেষেও কাজ করছে ...

<div style="width: 100px; height: 100px; float: left; position: relative;">
    <div
        style="width: 100%; height: 40px; position: absolute; top: 50%; left: 0; margin-top: -20px; line-height:19px; text-align: center; z-index: 999999999999999">
        99%<Br />
        Total
    </div>
    <canvas id="chart-area" width="100" height="100" />
</div>

এখানে চিত্র বর্ণনা লিখুন

— আমেরিক সিং
সূত্র
5
আমি আপনার সমাধানটি ব্যবহার করেছি কারণ এটি দ্রুততম ছিল এবং এটি এর কাজ করে। ধন্যবাদ!
— এমডিটি
@ আমেরিক সিং এটি প্রকৃতপক্ষে একটি ভাল সমাধান তবে চার্টটি পিএনজি চিত্র হিসাবে ডাউনলোড করা থাকলে কেন্দ্রের পাঠ্যটি রফতানি হবে না।
— techie_28
সুন্দর সমাধান, এটির খুব বেশি বিরক্ত করার দরকার নেই।
— শশাঙ্ক 11
তুমি আমার ছেলে! আমি কৌণিক জালগুলিতে সমাধান খুঁজে বার করতে পারি না এবং এরকম করে না করে কখনও। বিস্ময়কর।
— নওমি আলী
4
সুদৃশ্য, দ্রুত এবং পরিষ্কার ফিক্স
— খালিল
11

@ র‌্যাপ -২-এইচ উত্তরের ভিত্তিতে বেস, এখানে ড্যাশবোর্ডে ব্যবহারের জন্য Chart.js এ ডোনট চার্টে পাঠ্য ব্যবহারের কোড। প্রতিক্রিয়াশীল বিকল্পের জন্য এটিতে ডায়নামিক ফন্ট-আকার রয়েছে।

এইচটিএমএল:

<div>text
<canvas id="chart-area" width="300" height="300" style="border:1px solid"/><div>

লিপি:

var doughnutData = [
            {
                value: 100,
                color:"#F7464A",
                highlight: "#FF5A5E",
                label: "Red"
            },
            {
                value: 50,
                color: "#CCCCCC",
                highlight: "#5AD3D1",
                label: "Green"
            }
        ];

$(document).ready(function(){
  var ctx = $('#chart-area').get(0).getContext("2d");

  var myDoughnut = new Chart(ctx).Doughnut(doughnutData,{
     animation:true,
     responsive: true,
     showTooltips: false,
     percentageInnerCutout : 70,
     segmentShowStroke : false,
     onAnimationComplete: function() {

     var canvasWidthvar = $('#chart-area').width();
     var canvasHeight = $('#chart-area').height();
     //this constant base on canvasHeight / 2.8em
     var constant = 114;
     var fontsize = (canvasHeight/constant).toFixed(2);
     ctx.font=fontsize +"em Verdana";
     ctx.textBaseline="middle"; 
     var total = 0;
     $.each(doughnutData,function() {
       total += parseInt(this.value,10);
   });
  var tpercentage = ((doughnutData[0].value/total)*100).toFixed(2)+"%";
  var textWidth = ctx.measureText(tpercentage).width;

   var txtPosx = Math.round((canvasWidthvar - textWidth)/2);
    ctx.fillText(tpercentage, txtPosx, canvasHeight/2);
  }
 });
});

উইন্ডোটির আকার পরিবর্তন করতে এখানে নমুনা কোড try http://jsbin.com/wapono/13/edit

— জেটুনস সিএইচ
সূত্র
4
প্রতিক্রিয়াশীলতার (আমার ক্ষেত্রে) প্রয়োজনের ক্ষেত্রে এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।
— গ্রেগ ব্লাস
4
আপনার যদি টুলটিপস থাকে তবে পাঠ্যটি হোভারে অদৃশ্য হয়ে যাবে।
— ইউলিয়ান
ত্রুটি "jQuery. ডিফার্ড ব্যতিক্রম: চার্ট সংজ্ঞায়িত করা হয়নি"
— কুইকিনেট
11

আপনি যদি এটির প্রতিক্রিয়া চান তবে আপনি আপেক্ষিক / পরম অবস্থানের সাথে সিএসএস ব্যবহার করতে পারেন। এছাড়াও এটি মাল্টি-লাইন সহজেই পরিচালনা করতে পারে।

https://jsfiddle.net/mgyp0jkk/

<div class="relative">
  <canvas id="myChart"></canvas>      
  <div class="absolute-center text-center">
    <p>Some text</p>
    <p>Some text</p>
  </div>
</div>
— দিবসে
সূত্র
সুন্দর সমাধান :)
— মানজা
সুপার ওয়ার্ক ভাই আপনি আমার দিনটি তৈরি করেছেন
— ডিভিপি স্মার্টক্রিটারস ইনক আমরা
8

এটি Chart.js 2 এর জন্য সিমাইকারের আপডেটের ভিত্তিতে তৈরি হয়েছে (আমি এখনও মন্তব্য করতে পারি না বলে অন্য উত্তর হিসাবে পোস্ট করা হয়েছে)

চার্টের উচ্চতা এটিকে অন্তর্ভুক্ত না করে যখন কিংবদন্তি প্রদর্শিত হয় তখন আমি Chrome এ পাঠ্য প্রান্তিককরণ নিয়ে একটি সমস্যা ছিল যাতে এটি মাঝখানে সঠিকভাবে প্রান্তিক না হয়। ফন্টসাইজ এবং টেক্সটওয়াইয়ের গণনায় এটির জন্য অ্যাকাউন্টিং করে এটি ঠিক করা হয়েছে।

পৃষ্ঠাটিতে আমার একাধিক রয়েছে বলে আমি সেটটির মানের চেয়ে পদ্ধতির অভ্যন্তরে শতাংশ নির্ধারণ করেছি। অনুমানগুলি হ'ল আপনার চার্টের কেবলমাত্র 2 টি মান রয়েছে (অন্যথায় শতাংশটি কত? এবং আপনি যে শতাংশটিই প্রদর্শন করতে চান প্রথমটি এটি। আমার কাছে অন্যান্য চার্টও রয়েছে তাই আমি টাইপ = ডোনাটের জন্য একটি চেক করি। আমি কেবল শতাংশ দেখাতে ডোনাট ব্যবহার করছি তাই এটি আমার পক্ষে কাজ করে।

পাঠ্য রঙটি কিছুটা হিট লেগেছে এবং কিসের ক্রমগুলির উপর নির্ভর করে কিছুগুলি মিস হয় তাই আমি লেখার রঙ পরিবর্তন করতে চাইলে একটি সমস্যা নিয়ে এসেছি (এক ক্ষেত্রে কালো এবং প্রাথমিক বর্ণের মধ্যে এবং দ্বিতীয়টিতে দ্বিতীয় রঙ এবং সাদা) তাই বিদ্যমান ফিল স্টাইলটি যা ছিল তা আমি "সংরক্ষণ" করি, পাঠ্যটি আঁকুন (প্রাথমিক ডেটার রঙে) তারপরে পুরানো ফিল স্টাইলটি পুনরুদ্ধার করুন। (পুরানো ফিল স্টাইল সংরক্ষণ করা প্রয়োজন মনে হয় না তবে আপনি কখনই জানেন না))

https://jsfiddle.net/g733tj8h/

Chart.pluginService.register({
  beforeDraw: function(chart) {
    var width = chart.chart.width,
        height = chart.chart.height,
        ctx = chart.chart.ctx,
        type = chart.config.type;

    if (type == 'doughnut')
    {
      var percent = Math.round((chart.config.data.datasets[0].data[0] * 100) /
                    (chart.config.data.datasets[0].data[0] +
                    chart.config.data.datasets[0].data[1]));
      var oldFill = ctx.fillStyle;
      var fontSize = ((height - chart.chartArea.top) / 100).toFixed(2);

      ctx.restore();
      ctx.font = fontSize + "em sans-serif";
      ctx.textBaseline = "middle"

      var text = percent + "%",
          textX = Math.round((width - ctx.measureText(text).width) / 2),
          textY = (height + chart.chartArea.top) / 2;

      ctx.fillStyle = chart.config.data.datasets[0].backgroundColor[0];
      ctx.fillText(text, textX, textY);
      ctx.fillStyle = oldFill;
      ctx.save();
    }
  }
});

কোড স্নিপেট দেখান

— ররি
সূত্র
7

আপনি মায়াঙ্কসিপিডিক্সিট কোডটি বিকল্পে পেস্ট করতে পারেন onAnimationComplete:

// ...
var myDoughnutChart = new Chart(ctx).Doughnut(data, {
    onAnimationComplete: function() {
        ctx.fillText(data[0].value + "%", 100 - 20, 100, 200);
    }
});

পাঠ্য অ্যানিমেশন পরে প্রদর্শিত হবে

— র‌্যাপ -২-এইচ
সূত্র
6
ভাল তবে পাঠ্যটি
— হোভারে
4
ঠিক আছে, পাঠ্যটি হোভারের উপর অদৃশ্য হয়ে যায় ... :( এটি কীভাবে করা যায় তার কোনও ধারণা টেক্সটটি অদৃশ্য হয়ে যায়নি! ধন্যবাদ
— MDT
@ এমডিটি @ এমড saveপদ্ধতিটি ব্যবহার করে হতে পারে
— techie_28
7

আমি 7 টি jQueryUI স্লাইডার এবং চার্টজে (ভিতরে গতিশীল পাঠ্য সহ) একটি ডেমো তৈরি করেছি

Chart.types.Doughnut.extend({
        name: "DoughnutTextInside",
        showTooltip: function() {
            this.chart.ctx.save();
            Chart.types.Doughnut.prototype.showTooltip.apply(this, arguments);
            this.chart.ctx.restore();
        },
        draw: function() {
            Chart.types.Doughnut.prototype.draw.apply(this, arguments);

            var width = this.chart.width,
                height = this.chart.height;

            var fontSize = (height / 140).toFixed(2);
            this.chart.ctx.font = fontSize + "em Verdana";
            this.chart.ctx.textBaseline = "middle";

            var red = $( "#red" ).slider( "value" ),
            green = $( "#green" ).slider( "value" ),
            blue = $( "#blue" ).slider( "value" ),
            yellow = $( "#yellow" ).slider( "value" ),
            sienna = $( "#sienna" ).slider( "value" ),
            gold = $( "#gold" ).slider( "value" ),
            violet = $( "#violet" ).slider( "value" );
            var text = (red+green+blue+yellow+sienna+gold+violet) + " minutes";
            var textX = Math.round((width - this.chart.ctx.measureText(text).width) / 2);
            var textY = height / 2;
            this.chart.ctx.fillStyle = '#000000';
            this.chart.ctx.fillText(text, textX, textY);
        }
    });


var ctx = $("#myChart").get(0).getContext("2d");
var myDoughnutChart = new Chart(ctx).DoughnutTextInside(data, {
    responsive: false
});

JSFIDDLE এ ডেমো

এখানে চিত্র বর্ণনা লিখুন

— স্টাফেন গ্রিলন
সূত্র
3

@ র‌্যাপ -২-এইচ এবং @ জেডুনস সিএফ এর উত্তরটি showTooltipsবিকল্পটি সক্রিয় হওয়ার অনুমতি দেয় না , তবে আপনি যা করতে পারেন তা তৈরি করে দ্বিতীয় স্তর তৈরি করুনcanvas চার্টটি রেন্ডারিংয়ের পিছনে অবজেক্ট ।

গুরুত্বপূর্ণ অংশটি ডিভগুলিতে এবং ক্যানভাস অবজেক্টের জন্য প্রয়োজনীয় স্টাইলিং যাতে তারা একে অপরের উপরে রেন্ডার করে।

var data = [
    {value : 100, color : 'rgba(226,151,093,1)', highlight : 'rgba(226,151,093,0.75)', label : "Sector 1"},
    {value : 100, color : 'rgba(214,113,088,1)', highlight : 'rgba(214,113,088,0.75)', label : "Sector 2"},
    {value : 100, color : 'rgba(202,097,096,1)', highlight : 'rgba(202,097,096,0.75)', label : "Sector 3"}
]

var options = { showTooltips : true };
     
var total = 0;
for (i = 0; i < data.length; i++) {
     total = total + data[i].value;
}

var chartCtx = $("#canvas").get(0).getContext("2d");
var chart = new Chart(chartCtx).Doughnut(data, options);

var textCtx = $("#text").get(0).getContext("2d");
textCtx.textAlign = "center";
textCtx.textBaseline = "middle";
textCtx.font = "30px sans-serif";
textCtx.fillText(total, 150, 150);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<html>
<body>
<div style="position: relative; width:300px; height:300px;">
    <canvas id="text" 
            style="z-index: 1; 
                   position: absolute;
                   left: 0px; 
                   top: 0px;" 
            height="300" 
            width="300"></canvas>
    <canvas id="canvas" 
            style="z-index: 2; 
                   position: absolute;
                   left: 0px; 
                   top: 0px;" 
            height="300" 
            width="300"></canvas>
</div>
</body>
</html>
স্নিপেট প্রসারিত করুন

এখানে jsfiddle: https://jsfiddle.net/68vxqyak/1/

— RYUUSiiSTAR
সূত্র
1

@ সাইমাইকার, চার্ট.জেএস ভি 2 এর দুর্দান্ত সমাধান

সামান্য বর্ধন: উপযুক্ত ক্যানভাস আইডি চেক করার জন্য এটি বোধগম্য হয়, নীচের পরিবর্তিত স্নিপেটটি দেখুন। অন্যথায় পাঠ্যটি (অর্থাত্ 75%) পৃষ্ঠার মধ্যে অন্যান্য চার্ট প্রকারের মাঝেও রেন্ডার করা হয়।

  Chart.pluginService.register({
    beforeDraw: function(chart) {
      if (chart.canvas.id === 'doghnutChart') {
        let width = chart.chart.width,
            height = chart.chart.outerRadius * 2,
            ctx = chart.chart.ctx;

        rewardImg.width = 40;
        rewardImg.height = 40;
        let imageX = Math.round((width - rewardImg.width) / 2),
            imageY = (height - rewardImg.height ) / 2;

        ctx.drawImage(rewardImg, imageX, imageY, 40, 40);
        ctx.save();
      }
    }
  });

যেহেতু একটি কিংবদন্তি (দেখুন: http://www.chartjs.org/docs/latest/configration/legnd.html ) চার্টের উচ্চতাকে প্রশস্ত করে তাই উচ্চতার মানটি ব্যাসার্ধের দ্বারা প্রাপ্ত হওয়া উচিত।

— লারমিয়া
সূত্র
1

আলেসানার সমাধানটি আমার পক্ষে সাধারণভাবে খুব সুন্দরভাবে কাজ করে, তবে অন্যদের মতো আমিও লাইন ব্রেক কোথায় ঘটে তা নির্দিষ্ট করতে সক্ষম হতে চেয়েছিলাম। '\ N' অক্ষরগুলিতে লাইন মোড়ানোর জন্য আমি কিছু সাধারণ পরিবর্তন করেছি, যতক্ষণ না লেখাটি ইতিমধ্যে মোড়ানো থাকে। আরও একটি সম্পূর্ণ সমাধান যদি পাঠ্যে কোনও '\ n' অক্ষর থাকে তবে মোড়কে জোর করে, তবে ফন্ট আকারের সাহায্যে সেই কাজটি করার জন্য আমার কাছে এই মুহুর্তের সময় নেই। মোড়ানোর সময় পরিবর্তনটি আরও অনুভূমিকভাবে কেন্দ্র করে ( কোডটি নীচে রয়েছে (আমি এখনও মন্তব্য পোস্ট করতে পারি না)।

যদি কেউ এই প্লাগ-ইনটি গিটহাবের উপরে রাখেন তবে দুর্দান্ত হবে ...

Chart.pluginService.register({
  beforeDraw: function(chart) {
    if (chart.config.options.elements.center) {
      // Get ctx from string
      var ctx = chart.chart.ctx;

      // Get options from the center object in options
      var centerConfig = chart.config.options.elements.center;
      var fontStyle = centerConfig.fontStyle || 'Arial';
      var txt = centerConfig.text;
      var color = centerConfig.color || '#000';
      var maxFontSize = centerConfig.maxFontSize || 75;
      var sidePadding = centerConfig.sidePadding || 20;
      var sidePaddingCalculated = (sidePadding / 100) * (chart.innerRadius * 2)
      // Start with a base font of 30px
      ctx.font = "30px " + fontStyle;

      // Get the width of the string and also the width of the element minus 10 to give it 5px side padding
      var stringWidth = ctx.measureText(txt).width;
      var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;

      // Find out how much the font can grow in width.
      var widthRatio = elementWidth / stringWidth;
      var newFontSize = Math.floor(30 * widthRatio);
      var elementHeight = (chart.innerRadius * 2);

      // Pick a new font size so it will not be larger than the height of label.
      var fontSizeToUse = Math.min(newFontSize, elementHeight, maxFontSize);
      var minFontSize = centerConfig.minFontSize;
      var lineHeight = centerConfig.lineHeight || 25;
      var wrapText = false;

      if (minFontSize === undefined) {
        minFontSize = 20;
      }

      if (minFontSize && fontSizeToUse < minFontSize) {
        fontSizeToUse = minFontSize;
        wrapText = true;
      }

      // Set font settings to draw it correctly.
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
      var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
      ctx.font = fontSizeToUse + "px " + fontStyle;
      ctx.fillStyle = color;

      if (!wrapText) {
        ctx.fillText(txt, centerX, centerY);
        return;
      }

      var lines = [];
      var chunks = txt.split('\n');
      for (var m = 0; m < chunks.length; m++) {
        var words = chunks[m].split(' ');
        var line;

        // Break words up into multiple lines if necessary
        for (var n = 0; n < words.length; n++) {
          var testLine = (n == 0) ? words[n] : line + ' ' + words[n];
          var metrics = ctx.measureText(testLine);
          var testWidth = metrics.width;
          if (testWidth > elementWidth && n > 0) {
            lines.push(line);
            line = words[n];
          } else {
            line = testLine;
          }
        }
        lines.push(line);
      }

      // Move the center up depending on line height and number of lines
      centerY -= ((lines.length-1) / 2) * lineHeight;

      // All but last line
      for (var n = 0; n < lines.length; n++) {
        ctx.fillText(lines[n], centerX, centerY);
        centerY += lineHeight;
      }
    }
  }
});
— sferrari
সূত্র
0

সবার আগে, Chart.js বেছে নেওয়ার জন্য কুডোস! আমি এটি আমার বর্তমান প্রকল্পগুলির একটিতে ব্যবহার করছি এবং আমি একেবারে পছন্দ করি - এটি পুরোপুরিভাবে কাজ করে।

যদিও লেবেল / সরঞ্জামদণ্ডগুলি এখনও গ্রন্থাগারের অংশ নয়, আপনি এই তিনটি পুল অনুরোধগুলি একবার দেখে নিতে পারেন:

এবং, যেমন ক্র্যাকার0ডক্স উল্লেখ করেছেন, Chart.js canvasরেন্ডারিংয়ের জন্য ব্যবহার করে যাতে আপনি কেবল নিজের সাথে নিজের সাথে সরাসরি আলাপচারিতার মাধ্যমে সরঞ্জামের সরঞ্জাম প্রয়োগ করতে পারেন।

আশাকরি এটা সাহায্য করবে.

— ভোলপাভ
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.