차트 js 2 막대폭을 설정하는 방법

차트 js 2 막대폭을 설정하는 방법

저는 Chart js version: 2.1.4를 사용하고 있고 막대폭을 제한할 수 없습니다.스택 오버플로우에서 두 가지 옵션을 찾았습니다.

barPercentage: 0.5

아니면

categorySpacing: 0

하지만 둘 다 언급된 버전으로 작동하지 않습니다.chart.js core library를 수동으로 수정하지 않고 이 문제를 해결할 수 있는 방법이 있습니까?

감사해요.

맞습니다 : 편집해야 하는 속성은barPercentage.

그러나 값을 편집한 위치에서 오류가 발생했을 수도 있습니다.

막대 차트 옵션에서 볼 수 있듯이:

이름 : 막대 백분율
- 유형 : 번호
- 기본값 : 0.9
- 설명 : 각 막대의 사용 가능한 너비의 백분율(0-1)이 범주 백분율 내에 있어야 합니다.1.0은 전체 범주 폭을 취하고 막대를 서로 바로 옆에 놓습니다.더 읽기

속성이 실제로 저장되어 있습니다.scales.xAxes("xAxes" 테이블에 대한 옵션).

따라서 차트를 이런 식으로 편집하기만 하면 됩니다.

var options = {
    scales: {
        xAxes: [{
            barPercentage: 0.4
        }]
    }
}

---

Here is a fully working example with a custom width ( 0.2) for the bar :

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        data: [65, 59, 75, 81, 56, 55, 40],
    }]
};

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                // Change here
            	barPercentage: 0.2
            }]
        }
    }
});

console.log(myChart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart"></canvas>

---

업데이트 (Chart.js 버전 2.2.0+)

릴리스 버전 2.2.0 - 후보 2에 명시된 바와 같이:

향상된 기능

• 이제 막대 차트에서 막대의 두께를 수동으로 구성할 수 있습니다.새것을 사용합니다.barThickness막대의 두께를 설정하는 올바른 축의 옵션.
• 등등...

버전 2.8+의 경우(그리고 아마도 2.2까지 거슬러 올라가야 함), 막대 두께, 최대 두께 등에 대한 우수한 컨트롤이 있습니다.

Chart.js 설명서에 따르면 다음과 같이 설정합니다.

{
    type: 'bar', // or 'horizontalBar'
    data: ...,
    options: {
        scales: {
            xAxes: [{
                barThickness: 6,  // number (pixels) or 'flex'
                maxBarThickness: 8 // number (pixels)
            }]
        }
    }
}

v2.7.2를 기준으로 다음을 수행할 수 있습니다.

scales: {
  xAxes: [{
    maxBarThickness: 100,
  }],
}

각도 프로젝트에서 ng2-chart를 사용하는 경우 막대 차트 구성이 유사합니다.

npm install ng2-charts chart.js --save

모듈에 'ng2-graphics'를 가져옵니다.

import { ChartsModule } from 'ng2-charts';

이제 막대 차트 구성:

barChartOptions: ChartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
  display: false
  },
};

barChartLabels: Label[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
barChartType: ChartType = 'bar';
barChartLegend = true;
barChartPlugins = [];

barChartData: ChartDataSets[] = [
 {
  barThickness: 16,
  barPercentage: 0.5,
  data: [65, 59, 80],
  label: 'Growth'
 },
 {
  barThickness: 16,
  barPercentage: 0.5,
  data: [28, 48, 40],
  label: 'Net'
  }
 ];

barChartColors: Color[] = [
  { backgroundColor: '#24d2b5' },
  { backgroundColor: '#20aee3' },
 ];

이제 HTML 부분:

<div class="bar-chart-wrapper">
   <canvas baseChart [datasets]="barChartData" [colors]="barChartColors" 
     [labels]="barChartLabels"
     [options]="barChartOptions" [plugins]="barChartPlugins" [legend]="barChartLegend"
     [chartType]="barChartType">
   </canvas>
 </div>

차트 컨테이너의 높이를 조절할 수 있습니다.

  .bar-chart-wrapper {
     height: 310px;
   }

barThickness그리고.maxBarThickness(이전에ChartOptions[])의 일부가 되었습니다.ChartDataSets[].

위 답변대로
다음은 반응 chartjs2를 사용한 완전한 막대 차트 그래프입니다.

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Bar } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
   LinearScale,
   BarElement,
  Title,
  Tooltip,
  Legend
);

export const options = {
  responsive: true,
    plugins: {
    legend: {
      position: 'top',   // lable position left/right/top/bottom
      labels: {
        boxWidth: 0,     // lable box size
      }
    },
  },
  elements: {
    point: {
      radius: 1
    }
  },
  scales: {
    x: {
      display: false,        // show/ hide x-axis
      grid: {
        display: false      // show/hide grid line in x-axis
      },
    },
    y: {
      display: false,      // same as x-axis
      grid: {
        display: false
      }
    }
  }
};

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

export const data = {
  labels,
  datasets: [
    {
      label: 'datasets',            // label text
      data: [100, 300, 500, 700],      
      backgroundColor: '#7b62ff',   // bar / column color
      barThickness: 6,             // <<<<<<<<<<<<   bar / column size  
    },
  ],
};

export default function ResumesGraph() {
  return (
    <div>
      <Bar
        data={data}
        options={options}
        width={'500px'}
        height={'180px'}
      />
    </div>
  );
}

이거 먹어봐요.

import {Chart} from "chart.js"

Chart.defaults.datasets.bar.maxBarThickness = 73;

//also try barPercentage

관심 있으신 분들을 위해 3.9 지점을 기반으로 빠른 포크를 만들어 역동적인 폭을 관리하였습니다 : https://github.com/stephanebouget/Chart.js/tree/3.9

예를 들어 다음과 같습니다.

라이브 데모

https://codepen.io/stephanebouget/pen/PoerxPP

var data = {
  datasets: [{
    label: 'Dataset #1',
    backgroundColor: 'rgba(255,99,132,0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    hoverBackgroundColor: 'rgba(255,99,132,0.4)',
    hoverBorderColor: 'rgba(255,99,132,1)',
    data: [65, 59, 20, 81, 56, 55, 40],
    setPercentage: [10, 2, 20, 40, 4, 6, 18], // Here is the magic !!!
  }],
};

언급URL : https://stackoverflow.com/questions/37856729/chart-js-2-how-to-set-bar-width