如何使用 Chart JS 将条形图转换为三角形图表？

问题描述

如何使用 Chart JS 将条形图转换为三角形图表？

例如：示例条形图：如何将其转换为三角形而不是条形？

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx,{
    type: 'bar',data: {
        labels: ['Red','Blue','Yellow','Green','Purple','Orange'],datasets: [{
            label: '# of Votes',data: [12,19,3,5,2,3],backgroundColor: [
                'rgba(255,99,132,0.2)','rgba(54,162,235,'rgba(255,206,86,'rgba(75,192,'rgba(153,102,255,159,64,0.2)'
            ],borderColor: [
                'rgba(255,1)',1)'
            ],borderWidth: 1
        }]
    },options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

解决方法

您可以使用 scatter 图表并为每个值定义单独的 datasets。

请查看您修改后的代码，看看它是如何工作的。

const labels = ['Red','Blue','Yellow','Green','Purple','Orange'];
const data = [12,19,3,5,2,3];
const colors = ['255,99,132','54,162,235','255,206,86','75,192,192','153,102,255',159,64'];

const datasets = labels.map((l,i) => ({
  label: l,data: [{ x: i + 1 - 0.45,y: 0 },{ x: i + 1,y: data[i] },{ x: i + 1 + 0.45,y: 0 }],fill: true,backgroundColor: 'rgba(' + colors[i] + ',0.2)',borderColor: 'rgb(' + colors[i] + ')',showLine: true,borderWidth: 1,lineTension: 0,pointRadius: 0,pointHitRadius: 0
}));

new Chart('myChart',{
  type: 'scatter',data: {
    datasets: datasets
  },options: {
    scales: {
      y: {
        beginAtZero: true
      },x: {
        min: 0,max: labels.length + 1,ticks: {
          callback: (v,i) => labels[i - 1] 
        },grid: {
          display: false
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
<canvas id="myChart" height="110"></canvas>

,

您必须实现自己的自定义图表类型才能执行此操作，因为默认情况下这是不可能的，您可以在文档中阅读如何实现自己的图表类型：https://www.chartjs.org/docs/master/developers/charts.html