图表图案填充

SpreadJS提供了模式填充图表的支持。SpreadJS API中的PatternType枚举允许用户在表单中的图表中应用不同的模式样式。您还可以为它指定前景色和背景色。

该特性帮助用户通过应用模式填充来增强图表定制功能，并对图表元素进行强调。下面是支持模式填充特征的图表元素:

数据点
图表区域图
区域数据系列
图表标题
数据标签
图例
头
页脚轴
标签
覆盖图

SpreadJS支持48种内置模式样式。参考下面的图表，它使用模式填充来描述世界人口。

使用代码

下面的代码使用 PatternType 属性将模式填充应用到图表元素。

$(document).ready(function () {
    //初始化spread
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });

    //获取活动表
    var sheet = spread.getSheet(0);

    //设置列宽
    sheet.setColumnWidth(2, 100);
    sheet.setColumnWidth(4, 100);

    // 创建数据数组
    var dataArray =
[
    ['Region', 'Subregion', 'country', 'Population'],
    ['Asia', 'Southern', 'India', 1354051854],
    [, , 'Pakistan', 200813818],
    [, , 'Bangladesh', 166368149],
    [, , 'Others', 170220300],
    [, 'Eastern', 'China', 1415045928],
    [, , 'Japan', 127185332],
    [, , 'Others', 111652273],
    [, 'South-Eastern', , 655636576],
    [, 'Western', , 272298399],
    [, 'Central', , 71860465],
    ['Africa', 'Eastern', , 433643132],
    [, 'Western', , 381980688],
    [, 'Northern', , 237784677],
    [, 'Others', , 234512021],
    ['Europe', , , 742648010],
    ['Others', , , 1057117703]
];

    // 设置数组
    sheet.setArray(1, 1, dataArray);
    var treemapChart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.treemap, 450, 0, 500, 500, "B2:E18");

    // 获取头并设置它的背景色与模式
    var title = treemapChart.title();
    title.fontSize = "24.00";
    title.text = "WORLD POPULATION";
    title.backColor = {
        type: GC.Spread.Sheets.Charts.PatternType.divot,
        foregroundColor: "Orange",
       backgroundColor: "pink",
    };
    treemapChart.title(title);

    // 获取数据点并设置模式类型
    var dataPoints = treemapChart.series().dataPoints();
    var fillColors = [{
        type: GC.Spread.Sheets.Charts.PatternType.sphere,
        foregroundColor: "LightGreen",
        backgroundColor: "lightgray",
    }, {
        type: GC.Spread.Sheets.Charts.PatternType.darkUpwardDiagonal,
        foregroundColor: "pink",
        backgroundColor: "white",
    },
    {
        type: GC.Spread.Sheets.Charts.PatternType.divot,
        foregroundColor: "purple",
        backgroundColor: "white",
    },
    {
        type: GC.Spread.Sheets.Charts.PatternType.dottedPercent40,
        foregroundColor: "LightBlue",
        backgroundColor: "white",
    }
    ];
    for (var i = 0; i < fillColors.length; i++) {
        var dataPoint = dataPoints.get(i);
        dataPoint.fillColor = fillColors[i];
        dataPoints.set(i, dataPoint);
    }

    // 获取数据，并将其背景色设置为黑色
    var dataLabels = treemapChart.dataLabels();
    dataLabels.color = 'black';
    treemapChart.dataLabels(dataLabels);
});