Chart.js入门：比例

最新推荐文章于 2023-02-11 14:33:26 发布

cunjie3951

最新推荐文章于 2023-02-11 14:33:26 发布

阅读量670

点赞数

文章标签： python java css javascript 大数据 ViewUI

在最后的四个教程中，您已经学到了很多有关Chart.js的知识。阅读前四篇教程后，您现在应该能够自定义工具提示和标签，更改字体并创建不同的图表类型。本系列中尚未涉及的Chart.js的一个方面是刻度。

自库v1.0版以来，缩放比例发生了很大变化，并且功能更加强大。在本教程中，您将学习如何使用库提供的不同选项来操作刻度并控制其外观。

更改网格线

网格线的所有配置选项都嵌套在gridLines项中的scale选项下。该键定义用于自定义垂直于轴的网格线的选项。让我们更改在折线图和条形图教程中创建的折线图的网格线。

您可以使用display键显示或隐藏图表的网格线。其初始值为true ，因此默认情况下显示网格线。可以使用color键指定网格线的color 。如果希望网格线由虚线而不是实线组成，则可以提供虚线的长度和间距的值作为borderDash键的值。您可以分别使用zeroLineWidth和zeroLineColor键为第一个索引或零索引设置线条的宽度和颜色。

到目前为止，在所有图表中，刻度尺都没有任何描述性文字让观众知道特定轴代表什么。这会使图表的使用率降低。例如，如果您看到了汽车速度图，却无法找出在y轴上绘制速度的单位，则该图表几乎没有用。

您可以使用display键在图表上显示或隐藏比例标签。比例标签默认为隐藏。可以使用labelString键指定应在这些比例尺上显示的文本。您还可以分别使用fontColor ， fontFamily ， fontSize和fontStyle键来控制字体颜色，系列，大小和样式。

这是相同的旧车速度表，其中指定了不同的图表选项集。

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      gridLines: {
        display: false,
        color: "black"
      },
      scaleLabel: {
        display: true,
        labelString: "Time in Seconds",
        fontColor: "red"
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};

还有一个键叫做offsetGridLines 。设置为true ，它将标签移动到网格线的中间。通常在创建条形图时很有用。

配置线性比例

线性刻度用于绘制数字数据。可以在x或y轴上创建这些比例。在大多数情况下，Chart.js会自动检测刻度的最小值和最大值。但是，这可能会导致一些混乱。

假设您想绘制班级中学生的成绩。如果测试的最大分数是200，但是没有一个学生的得分超过180，则该等级的最大分数可能是180。在这种情况下，读者将无法知道最大分数是180还是200 。

Chart.js具有多个内置选项，可让您控制比例的不同键。您可以使用min和max键指定刻度的min和max 。可以使用stepSize属性控制刻度的步长。这样，您可以确定在图表上应绘制多少条网格线。设置图表上显示的网格线和刻度线数量限制的另一种方法是使用maxTicksLimit键。

这是用于在本系列上一教程的条形图中指定水平刻度的最小和最大刻度值的代码。

var chartOptions = {
  scales: {
    yAxes: [{
      barPercentage: 0.5,
      gridLines: {
        display: false
      }
    }],
    xAxes: [{
      gridLines: {
        zeroLineColor: "black",
        zeroLineWidth: 2
      },
      ticks: {
        min: 0,
        max: 6500,
        stepSize: 1300
      },
      scaleLabel: {
        display: true,
        labelString: "Density in kg/m3"
      }
    }]
  },
  elements: {
    rectangle: {
      borderSkipped: 'left',
    }
  }
};

与线性刻度一样，您也可以创建对数刻度以在图表上绘制值。在这种情况下，对数插值用于确定点在轴上的位置。这些标尺也可以放置在x轴和y轴上。

配置径向线性比例

此比例类型用于雷达和极地面积图类型。与常规线性比例尺不同，此比例尺覆盖图表区域而不是放置在轴上。

有许多键专门针对径向比例尺。例如，可以使用lineArc键指定网格线是圆形还是直线。对于雷达图，默认值为false ；对于极地图，默认值为true 。

您可以使用angleLines键控制从图表中心到其点标签的辐射线的外观。它接受一个对象作为其值。该对象可以包含用于控制角度线的颜色和宽度的键。您可以通过将display key的值设置为false来隐藏角线。可以使用color和lineWidth键控制角度线的颜色和宽度。

点标签的外观可以使用pointLabels键进行控制。就像角线一样，此键也接受一个对象作为其值。请注意，仅当lineArc的值设置为false时，这些选项才有效。可以使用fontColor ， fontFamily ， fontSize和fontStyle键指定字体颜色，系列，大小和样式。

您还可以使用min和max键设置刻度的min和max 。可以使用stepSize和maxTicksLimit键指定步长和刻度的最大刻度数。这些选项在ticks键下可用。可里面的一些其他键ticks是showLabelBackdrop ， backdropColor ， backdropPaddingX和backDropPaddingY 。您可以使用它们在刻度标签后面显示或隐藏背景，并控制其宽度，高度和颜色。

您还可以使用我们用于折线图的gridLines键为雷达图中的网格线设置颜色和宽度。以下是一些使用自定义比例尺创建雷达图的选项。

var chartOptions = {
  scale: {
    gridLines: {
      color: "black",
      lineWidth: 3
    },
    angleLines: {
      display: false
    },
    ticks: {
      beginAtZero: true,
      min: 0,
      max: 100,
      stepSize: 20
    },
    pointLabels: {
      fontSize: 18,
      fontColor: "green"
    }
  },
  legend: {
    position: 'left'
  }
};

配置时间刻度

您可以使用时间刻度在图表上显示时间和日期。如Chart.js入门教程中所述，您需要在项目中包含Moment.js才能显示时间。使用时间刻度的一个限制是它只能显示在x轴上。时间刻度的所有配置选项都位于time子选项下。

要创建时间刻度，您必须在xAxes子选项下将type键的值设置为time 。之后，您可以在time下设置不同键的值。使用unit键设置绘制刻度线的unit 。

可以使用unitStepSize键指定单位的步长。使用displayFormats子选项指定应显示刻度线标签的格式。您可以在Moment.js网站上了解有关允许的字符串格式的更多信息。

可以使用tooltipFormat键指定在工具提示中显示时间的格式。

您还可以使用round键将时间舍入，然后再将其绘制在图表上。设置round的值时要小心。假设您将其值设置为hour ，则需要在图表上绘制两次。如果一次是5:30 AM，另一次是5:50 AM，则它们都将绘制在5:00 AM刻度上。将其值设置为minute将分别在5:30和5:50标记上进行绘制。

可以在以下代码的帮助下使用时间刻度来绘制本教程开始时绘制的折线图。

var chartOptions = {
  legend: {
    display: true,
    position: 'top',
    labels: {
      boxWidth: 80,
      fontColor: 'black'
    }
  },
  scales: {
    xAxes: [{
      type: "time",
      time: {
        unit: 'hour',
        unitStepSize: 0.5,
        round: 'hour',
        tooltipFormat: "h:mm:ss a",
        displayFormats: {
          hour: 'MMM D, h:mm A'
        }
      }
    }],
    yAxes: [{
      gridLines: {
        color: "black",
        borderDash: [2, 5],
      },
      scaleLabel: {
        display: true,
        labelString: "Speed in Miles per Hour",
        fontColor: "green"
      }
    }]
  }
};