分组条形图，在chart.js中

von4xj4u 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(247)

我见过其他支持分组条形图的javascript图表库，如下图所示，但我没有在chart.js的在线编辑器中看到这是一个显式选项。
有没有可能在chart.js中做这种分组条形图？容易吗？他们的在线编辑器中有没有针对它的模板？

chart.js

来源：https://stackoverflow.com/questions/28180871/grouped-bar-charts-in-chart-js

2条答案

按热度按时间

flvtvl501#

是的，您可以使用datasets属性提供多个数据集，该属性是一个包含值分组的数组。每个数据集在data中包含一系列与labels相对应的值。
根据您的Chart.js版本，请参阅下面两个略有不同的示例。
图表. js版本1.x

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
    labels: ["Chocolate", "Vanilla", "Strawberry"],
    datasets: [
        {
            label: "Blue",
            fillColor: "blue",
            data: [3,7,4]
        },
        {
            label: "Red",
            fillColor: "red",
            data: [4,3,5]
        },
        {
            label: "Green",
            fillColor: "green",
            data: [7,2,6]
        }
    ]
};

var myBarChart = new Chart(ctx).Bar(data, { barValueSpacing: 20 });

请参阅this JSFiddle。

图表. js版本2.x

var ctx = document.getElementById("myChart").getContext("2d");

var data = {
    labels: ["Chocolate", "Vanilla", "Strawberry"],
    datasets: [
        {
            label: "Blue",
            backgroundColor: "blue",
            data: [3,7,4]
        },
        {
            label: "Red",
            backgroundColor: "red",
            data: [4,3,5]
        },
        {
            label: "Green",
            backgroundColor: "green",
            data: [7,2,6]
        }
    ]
};

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        barValueSpacing: 20,
        scales: {
            yAxes: [{
                ticks: {
                    min: 0,
                }
            }]
        }
    }
});

请参阅this JSFiddle。

赞(0）回复(0）举报 2022-11-06

vsdwdz232#

是的，可以在chart.js中制作这种分组条形图，而且非常简单

循序渐进：-
步骤1：-

首先添加charts.js的脚本链接：-

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

步骤2：-

在html正文中添加div '

<body>
    <table>
      <tr>
        <td> 
          <div id="chart_div"  style="width: 800px; height: 300px;">
          </div> 
         </td>
      </tr>
    </table>
  </body>

步骤3：-

<script>
var densityCanvas = document.getElementById("densityChart");

var Data1 = {
 label: 'A',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  yAxisID: "y-axis-gravity"
}
var Data2 = {
 label: 'B',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  //yAxisID: "y-axis-gravity"
}
var Data3 = {
 label: 'C',
  data: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  backgroundColor: 'rgba(99, 132, 0, 0.6)',
  borderColor: 'rgba(99, 132, 0, 1)',
  //yAxisID: "y-axis-gravity"
}

***注-***：您可以创建多个要显示的变量数据，并仅将yAxisID赋予一个变量数据，然后将其显示为一个组y轴

var planetData = {
  labels: ["A", "B", "C"],
  datasets: [Data1,Data2, Data3 ]
};

var chartOptions = {
  scales: {
    xAxes: [{
      barPercentage: 1,
      categoryPercentage: 0.4
    }],
    yAxes: [{
      id: "y-axis-Registered"
    } 
    ]
    }
};

var barChart = new Chart(densityCanvas, {
  type: 'bar',
  data: planetData,
  options: chartOptions
});
</script>

***注意：-***当我试图使用这个离线Chart.js库，并为我的情况创建图表，然后这个漂亮的解决方案帮助我很多：-

图片中上次查看：-In picture Last Look

赞(0）回复(0）举报 2022-11-06

我来回答

分组条形图，在chart.js中

2条答案

图表. js版本2.x

相关问题

热门标签

最新问答