Chart.js - การเขียนป้ายกำกับภายในแถบแนวนอน?

ใน Chart.js มีวิธีเขียนป้ายกำกับภายในแถบแนวนอนในแผนภูมิ "horizontalBar" หรือไม่ เช่นเดียวกับ:

กราฟนี้

มีอะไรที่คล้ายกับสิ่งนี้เป็นไปได้ใน Chart.js หรือไม่

ขอบคุณ!


javascript chart.js labels
person antonin_scalia    schedule 28.07.2016    source แหล่งที่มา
comment
ฉันยุ่งกับการเปลี่ยนป้ายกำกับบนแผนภูมิเส้นตลอดทั้งสัปดาห์ ดูเหมือนไม่ยาก แต่ขอให้โชคดี   -  person Scott Selby    schedule 28.07.2016

คำตอบ (5)


arrow_upward
26
arrow_downward

ขณะนี้มีตัวเลือก "กระจก" เพื่อให้ป้ายกำกับปรากฏภายในแถบ

ตัวอย่างการกำหนดค่า "ตัวเลือก" สำหรับแผนภูมิแท่งแนวนอน :

options: {
    scales: {
        yAxes: [{ticks: {mirror: true}}]
    }
}

เอกสาร : http://www.chartjs.org/docs/latest/axes/cartesian/#common-configuration

person Elie    schedule 08.11.2016
comment
ในเอกสารประกอบเห็บระบุว่ามีไว้สำหรับเครื่องชั่งแนวตั้งเท่านั้น คุณแน่ใจหรือว่ามันทำงานในแนวนอน? - person crthompson; 10.03.2017
comment
ฉันไม่สามารถแสดงแดชบอร์ดที่ฉันสร้างให้คุณดูได้ แต่ใช่ มันใช้ได้กับแผนภูมิแท่งแนวนอนด้วย - person Elie; 11.03.2017
comment
ใช้งานได้กับ yAxis เท่านั้น ดังนั้นคุณจึงสามารถแสดงป้ายกำกับของคุณภายในแถบได้หากจัดเรียงในแนวนอนเท่านั้น - person bonbon; 11.07.2017

arrow_upward
9
arrow_downward

โดยการอ้างอิงถึง โซลูชันดั้งเดิมในการแสดงค่าข้อมูลโดยใช้ วิธี HTML5 Canvas fillText() ใน animation's onComplete โค้ดด้านล่างนี้จะให้สิ่งที่คุณต้องการ:

กุญแจสำคัญในการแสดงข้อมูลที่เกี่ยวข้องกับแผนภูมิแบบกำหนดเองคือการตรวจสอบชุดข้อมูลของแผนภูมิดังใน this.data.datasets ด้านล่าง ฉันทำสิ่งนี้โดยตรวจสอบว่าค่าต่างๆ อยู่ที่ใดในชุดข้อมูลนี้ รวมถึงตำแหน่งที่จะวางไว้สำหรับเมธอด fillText

การตรวจสอบชุดข้อมูลของแผนภูมิ: รูปภาพ

สคริปต์ (Chart.js 2.0 ขึ้นไป):

var barOptions = {
      events: false,
        showTooltips: false,
      legend: {
        display: false
      },
      scales:{
        yAxes: [{
          display: false
        }]
      },
        animation: {
        onComplete: function () {
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
              var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                  left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
              ctx.fillStyle = '#444'; // label color
              var label = model.label;
              ctx.fillText(label, left + 15, model.y + 8);
            }
          });               
        }
        }
    };

jsFiddle: http://jsfiddle.net/jfvy12h9/

person Hung Tran    schedule 05.08.2016
comment
การทดสอบอย่างรวดเร็วแสดงว่ามันใช้งานได้ แต่ป้ายกำกับจะหายไปเมื่อโฮเวอร์และแสดงคำแนะนำเครื่องมือ วิธีแก้ปัญหาสำหรับสิ่งนี้? - person benzkji; 25.04.2019
comment
การเพิ่ม hover: { animationDuration: 1 } จะปิดใช้งานภาพเคลื่อนไหวของคำแนะนำเครื่องมือ แต่แก้ปัญหาการกะพริบ/เปิด/ปิด... - person benzkji; 25.04.2019

arrow_upward
3
arrow_downward

คุณสามารถบรรลุเอฟเฟกต์นี้ได้ใน Chartjs 2.0 + โดยการหมุนป้ายกำกับ 90 องศา และใช้ช่องว่างภายในที่เป็นลบ เพื่อให้ป้ายกำกับเลื่อนขึ้นภายใน 'แถบ' บางสิ่งเช่นนี้:

new Chart(document.getElementById(id), {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          ticks: {
            autoSkip: false,
            maxRotation: 90,
            minRotation: 90,
            padding: -110
          }
        }
      ]
    }
  }
});

ดูกาเครื่องหมายเอกสารประกอบการกำหนดค่าสำหรับข้อมูลเพิ่มเติม

person omnikron    schedule 05.10.2017
comment
ขอบคุณ. สำหรับแนวนอน (แกน x) ทำเครื่องหมายที่ช่องว่างภายในเชิงลบ: -30 ก็เพียงพอแล้วที่จะเลื่อนขึ้นภายในพื้นที่แผนภูมิ ไม่จำเป็นต้องหมุนเวียน (chart.js v2.9.4) - person Patronaut; 06.11.2020

arrow_upward
0
arrow_downward

ดูเหมือนว่าไม่มีทางเลือกโดยตรงสำหรับเรื่องนี้ในขณะนี้ การใช้งานที่เป็นไปได้คือการวนซ้ำบนแท่ง/คอลัมน์โดยใช้ตะขอ onAnimationComplete คุณสามารถดูคำถามนี้เพื่อดูคำอธิบายโดยละเอียด วิธีแสดงค่าข้อมูลบนแผนภูมิ เจส

ฉันอยากให้คุณเตือนว่าสิ่งนี้มีข้อเสียเปรียบ เนื่องจากใช้ onAnimationComplete เมื่อใดก็ตามที่ภาพเคลื่อนไหวเกิดขึ้นบนแผนภูมิ ค่าต่างๆ จะหายไปชั่ววินาทีและปรากฏขึ้นอีกครั้ง

person Kubilay Karpat    schedule 30.07.2016

arrow_upward
0
arrow_downward

เนื่องจากบนแผนภูมิ "แท่ง" ใช้งานตัวเลือก "มิเรอร์" ไม่ได้...

ฉันพบวิธีแก้ปัญหาชั่วคราวแล้ว: Fiddle link

ฉันใช้แผนภูมิ js เวอร์ชัน 2.8.0 ที่แก้ไขในลิงก์นี้

<html>
    <body>
        <canvas id="myChart" width="800" height="600">
        </canvas>
    </body>
</html>





var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["ONE", "TWO", "THREE", "FOUR", "FIVE", "SIX", "SEVEN", "EIGHT"],
datasets: [{
    label: "Quota Eni mensile",
    backgroundColor: [
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)"
    ],
    borderColor: [
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)",
        "rgba(255, 255, 153, 1)"
    ],
    borderWidth: 1,
    data: [10, 11, 18, 10, 13, 28, 12, 16]
  }
  ]
},
options: {
    legend: {
        display: false
    },
    scales: {
        xAxes: [{
            ticks:{
                maxRotation: 90,
                minRotation: 90,
                display: "top"
             },          
         }],
         yAxes: [{
             display: false
         }]
     },
     tooltips: {
         enabled: true
     },
     maintainAspectRatio: true,
     responsive: true
 }

});

Chart.plugins.register({
/* Adjust axis labelling font size according to chart size */
  id: "responsiveXlabels",
  beforeDraw: function(c) {
      var chartHeight = c.chart.height;
      var size = (chartHeight * 2.5) / 100;
      var xAxis = c.scales["x-axis-0"];
      xAxis.options.ticks.minor.fontSize = size;
      xAxis.height = 10;
      xAxis.minSize.height = 10;
      c.options.scales.xAxes[0].ticks.padding = -size * 4.5;
      xAxis.margins.bottom = size * 12.5;
  },
  afterDraw: function(c) {
      c.options.scales.xAxes[0].ticks.padding = -158;
  }

});

ปลั๊กอิน responsiveXlabel ใช้เพื่อแปลงข้อความเมื่อปรับขนาด มีเพียงสิ่งเดียวที่ยังต้องแก้ไข: จัดแนวข้อความที่ด้านล่างของแกน

หวังว่านี่จะช่วยผู้ที่ต้องการใช้งานการมิเรอร์บนแกน X และตอบสนองคำขอที่ตอบสนอง

person erikthered65    schedule 09.08.2019