上一节:
下一节:

  ChartJS 条形图

  • 定义和使用

    Chart.js 柱状/条形图提供了一种以竖线表示数据值的显示方式。用来显示数据趋势，并排比较多个数据集。 
    var myBarChart = new Chart(ctx, {
  type: "bar",
  data: data,
  options: options
});
    尝试一下

  • 数据集属性

    柱状/条形图允许为每个数据集指定一些属性用于显示特定数据集。一些属性可以被指定为一个数组。如果这些设置为数组值，则第一个值应用于第一个节点，第二个值应用于第二个节点，依此类推。
    名称 类型 描述
    label String 在图例和工具提示中显示的数据集标签
    xAxisID String 绘制此数据集的 x 轴的 ID。如果未指定，则默认为第一个找到的 x 轴的 ID 。
    yAxisID String 绘制该数据集的 y 轴的 ID。如果未指定，则默认为第一个找到的 y 轴的 ID。
    backgroundColor Color/Color[] 柱状/条形图填充色
    borderColor Color/Color[] 边框色
    borderWidth Number/Number[] 边框宽度(以像素为单位)
    borderSkipped String 不绘制边框
    hoverBackgroundColor Color/Color[] 悬浮时的填充色
    hoverBorderColor Color/Color[] 悬浮时的边框色
    hoverBorderWidth Number/Number[] 悬浮时边框宽度

    borderSkipped

    此设置用于避免基线被填充。一般来说，除非创建从柱状/条形图派生的图表类型，否则不需要更改。
    • 'bottom'
    • 'left'
    • 'top'
    • 'right'

  • 配置选项

    柱状/条形图定义了以下配置选项。这些选项与全局图表配置选项 Chart.defaults.global 合并，形成最终传递给图表的选项。
    名称 类型 默认值 描述
    barPercentage Number 0.9 在 category 百分比内，每条 bar 的百分比(0-1)。如果设置为 1，则将使用 category 的整个宽度
    categoryPercentage Number 0.8 每个数据点可用宽度的百分比
    barThickness Number 手动设置每个 bar 的宽度像素。如果未设置，则使用 barPercentage 和 categoryPercentage 自动调整大小;
    maxBarThickness Number 设置该选项确保自动调整尺寸的 bar 的大小。仅当barThickness未设置时才能使用（自动调整大小已启用）。
    gridLines.offsetGridLines Boolean true 如果为 true，则特定数据点的条形落在网格线之间。如果为 false，网格线将直接位于网格中间。
    如果为 true，则特定数据点的条形落在网格线之间。如果为 false，网格线将直接位于网格中间。在实际项目中这是不太可能需要改变的。一般通过不同的配置来重复使用。
    此设置适用于条形图的轴配置。需要为每个新添加到图表中的轴设置此设置。 
    options = {
  scales: {
      xAxes: [
          {
              gridLines: {
                  offsetGridLines: true
              }
          }
      ]
  }
};
    条形图可以通过改变 X 轴和 Y 轴上的设置来启用堆叠，将其配置为堆叠条形图。堆积的条形图可以用来显示一个数据系列是如何由许多小块构成的。 
    var stackedBar = new Chart(ctx, {
  type: "bar",
  data: data,
  options: {
      scales: {
          xAxes: [
              {
                  stacked: true
              }
          ],
          yAxes: [
              {
                  stacked: true
              }
          ]
      }
  }
});

  • 水平条形图

    水平条形图是垂直条形图上的变体。它有时用来显示趋势数据，并排比较多个数据集。 
    var myBarChart = new Chart(ctx, {
  type: "horizontalBar",
  data: data,
  options: options
});
    尝试一下
上一节:
下一节: