Chart JS HTML legend & typescript

最新推荐文章于 2024-09-01 07:01:57 发布

bmjwin

最新推荐文章于 2024-09-01 07:01:57 发布

阅读量397

点赞数

分类专栏： ChartJS JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/bmjwin/article/details/111879789

版权

本文介绍如何在typescript和angular项目中利用Chart JS库生成图表，并着重讲解了两种方式实现图例（legend）的创建，包括通过options.legend属性和自定义HTML方法。在自动化测试场景下，作者推荐使用方法二，因为它允许设置HTML id以便于测试验证。文章还分享了在实现过程中遇到的问题及解决方案，并给出了HTML和CSS示例。

摘要由CSDN通过智能技术生成

最近新接了个web项目，用的是typscript，angular，oracle，protractor等技术。

再生成chart的时候引入了chart.js的类库。它实现的功能比较方便。

chartjs官网：https://www.chartjs.org/

下面介绍几种chartjs生成legend的方式：

方式1：options --> legend 属性，在这里可以指定labels是属性来构建显示内容

var chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
    }
});

如果你要显示比较复杂的数据，有数据源的情况下，可以使用以下属性

generateLabels function Generates legend items for each thing in the legend. Default implementation returns the text + styling for the color box. See Legend Item for details.

例子：

legend: {
labels: {
fontColor: VOLUME_BOA_CHART_HEX_COLOR.OFF_WHITE,
fontSize: 12,
padding: 32,
usePointStyle: true,
generateLabels: chart => chart.data.datasets.slice(0, 4).map((dataset, i) => ({ // chart.data.datasets是数据源
datasetIndex: i,
text: dataset.label.split(':')[0],
fillStyle: dataset.backgroundColor,
strokeStyle: dataset.borderColor,
lineDash: [5, 5],
pointStyle: legendIcon(i),
})),
},
position: 'bottom',
onClick: () => {},
},

方式2：关于复杂的legend（HTML），这个时候就不能用单纯的legend属性来设置了，需要用legendCallback 方法

仔细阅读了官方的文档是这样描述的：

Sometimes you need a very complex legend. In these cases, it makes sense to generate an HTML legend. Charts provide a generateLegend() method on their prototype that returns an HTML string for the legend.

To configure how this legend is generated, you can change the legendCallback config property.

Note that legendCallback is not called automatically and you must call generateLegend() yourself in code when creating a legend