分组条形图，在chart.js中

Question

分组条形图，在chart.js中

javascriptchart.js

82

我看到其他支持分组柱状图的JavaScript图表库，就像下面图片中的那样。我没有在chart.js的在线编辑器中看到这个作为一个明确的选项。

在chart.js中是否可以进行这种类型的分组柱状图? 是容易的吗? 在他们的在线编辑器中是否有模板?

- Jeff Dege

2个回答

2

是的，在chart.js中可以轻松地制作这种类型的分组条形图。

步骤：

第一步：

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

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

步骤2：

在HTML的body中添加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库并为我的情况创建图表时，这个漂亮的解决方案帮了我很多忙：-

在图片中最后一眼：- 在图片中最后一眼

- AYESHA JAVED

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jacob Budin · Accepted Answer

是的，您可以使用 datasets 属性提供多个数据集，它是一个包含值分组的数组。每个数据集都包含一系列与 labels 对应的 data 值。

根据您使用的 Chart.js 版本，以下是两个略有不同的示例。

Chart.js v1.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 });

请查看此JSFiddle.

Chart.js v2.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,
                }
            }]
        }
    }
});

请查看这个JSFiddle。