- GC
- GC.Data
- GC.Pivot
- GC.Spread.Pivot
- GC.Spread.Slicers
- GC.Spread.CalcEngine
- GC.Spread.Commands
- GC.Spread.Common
- GC.Spread.Formatter
- GC.Spread.Report
- GC.Spread.Sheets
- GC.Spread.Sheets.AutoMerge
- GC.Spread.Sheets.Barcode
- GC.Spread.Sheets.IO
- GC.Spread.Sheets.Bindings
- GC.Spread.Sheets.CalcEngine
- GC.Spread.Sheets.Search
- GC.Spread.Sheets.CellState
- GC.Spread.Sheets.CellTypes
- GC.Spread.Sheets.Charts
- GC.Spread.Sheets.DataCharts
- GC.Spread.Sheets.Commands
- GC.Spread.Sheets.Comments
- GC.Spread.Sheets.ThreadedComments
- GC.Spread.Sheets.ConditionalFormatting
- GC.Spread.Sheets.ContextMenu
- GC.Spread.Sheets.Collaboration
- GC.Spread.Sheets.DataValidation
- GC.Spread.Sheets.DataRange
- GC.Spread.Sheets.Fill
- GC.Spread.Sheets.Filter
- GC.Spread.Sheets.FloatingObjects
- GC.Spread.Sheets.FormulaTextBox
- GC.Spread.Sheets.Hyperlink
- GC.Spread.Sheets.OutlineColumn
- GC.Spread.Sheets.Outlines
- GC.Spread.Sheets.FormulaPanel
- GC.Spread.Sheets.PDF
- GC.Spread.Sheets.InputMask
- GC.Spread.Sheets.Print
- GC.Spread.Sheets.NameBox
- GC.Spread.Sheets.Shapes
- GC.Spread.Sheets.Slicers
- GC.Spread.Sheets.Sparklines
- GC.Spread.Sheets.StatusBar
- GC.Spread.Sheets.Tables
- GC.Spread.Sheets.TableSheet
- GC.Spread.Sheets.Touch
- GC.Spread.Sheets.Designer
- GC.Spread.Sheets.GanttSheet
- GC.Spread.Sheets.AI
- Collaboration
- GC.Spread.Excel
GC.Spread.Sheets.Slicers.TimelineStyle
Class: TimelineStyle
Table of contents
Constructors
Methods
- fromJSON
- headerStyle
- name
- periodLabel1Style
- periodLabel2Style
- selectedTimeBlockSpaceStyle
- selectedTimeBlockStyle
- selectionLabelStyle
- timeLevelStyle
- toJSON
- unselectedTimeBlockStyle
- wholeSlicerStyle
Constructors
constructor
• new TimelineStyle()
Represents the timeline style settings.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8")],
["4", "NewYork", new Date("1972/7/3")],
["4", "NewYork", new Date("1964/3/2")]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
style.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '12pt Calibri'));
style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('yellow', 'green', '14pt Calibri'));
style.timeLevelStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'white', '14pt Calibri'));
timeline.style(style);
Methods
fromJSON
▸ fromJSON(data): void
Loads the object state from the specified JSON string.
example
//This example uses the fromJSON method.
const light1 = GC.Spread.Sheets.Slicers.TimelineStyles.light1();
//export
const jsonStr = JSON.stringify(light1.toJSON());
//import
const newTheme = new GC.Spread.Sheets.Slicers.TimelineStyle();
newTheme.fromJSON(JSON.parse(jsonStr));
newTheme.name('custom1');
alert(jsonStr);
Parameters
| Name | Type | Description |
|---|---|---|
data |
Object |
The timeline slicer theme data from deserialization. |
Returns
void
headerStyle
▸ headerStyle(value?): any
Gets or sets the style of the slicer header, including color, font, and border.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('yellow', 'green', '14pt Calibri'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the slicer header; otherwise, returns the slicer style.
name
▸ name(value?): any
Gets or sets the name of the style.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
console.log(timeline.name()); // 'timeline1'
timeline.name("birthday");
console.log(timeline.name()); // 'birthday'
Parameters
| Name | Type |
|---|---|
value? |
string |
Returns
any
If no value is set, returns the name of the style; otherwise, returns the slicer style.
periodLabel1Style
▸ periodLabel1Style(value?): any
Gets or sets the style of the timeline period label 1, only the font style is set.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
style.periodLabel1Style(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'blue', '12pt Calibri'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the timeline period label 1; otherwise, returns the slicer style.
periodLabel2Style
▸ periodLabel2Style(value?): any
Gets or sets the style of the timeline period label 2, only the font style is set.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
style.periodLabel2Style(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '12pt Calibri'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the timeline period label 2; otherwise, returns the slicer style.
selectedTimeBlockSpaceStyle
▸ selectedTimeBlockSpaceStyle(value?): any
Gets or sets the style of the timeline selected time block space, only the color style is set.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle()
style.selectedTimeBlockSpaceStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', undefined, '12pt Calibri'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the timeline selected time block space; otherwise, returns the slicer style.
selectedTimeBlockStyle
▸ selectedTimeBlockStyle(value?): any
Gets or sets the style of the selected time block, including color and border.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
var border = new GC.Spread.Sheets.Slicers.SlicerBorder(3, "dashed", "green");
style.selectedTimeBlockStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', undefined, '12pt Calibri', border, border, border, border));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the selected time block; otherwise, returns the slicer style.
selectionLabelStyle
▸ selectionLabelStyle(value?): any
Gets or sets the style of the timeline selection label, only the font style is set.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
style.selectionLabelStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'blue', '12pt Calibri'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the timeline selection label; otherwise, returns the slicer style.
timeLevelStyle
▸ timeLevelStyle(value?): any
Gets or sets the style of the timeline time level, only the font style is set.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
style.timeLevelStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'blue', '14pt Calibri'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the timeline time level; otherwise, returns the slicer style.
toJSON
▸ toJSON(): Object
Saves the object state to a JSON string.
example
//This example uses the toJSON method.
const light1 = GC.Spread.Sheets.Slicers.TimelineStyles.light1();
//export
const jsonStr = JSON.stringify(light1.toJSON());
//import
const newTheme = new GC.Spread.Sheets.Slicers.TimelineStyle();
newTheme.fromJSON(JSON.parse(jsonStr));
newTheme.name('custom1');
alert(jsonStr);
Returns
Object
The timeline slicer theme data.
unselectedTimeBlockStyle
▸ unselectedTimeBlockStyle(value?): any
Gets or sets the style of the unselected time block, including color and border.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = sheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
var timeline = sheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
pivotTable.labelFilter("Birthday", { condition: { operator: 18, conType: 1, val: [] } });
var style = new GC.Spread.Sheets.Slicers.TimelineStyle();
style.unselectedTimeBlockStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', undefined, '12pt Calibri'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the unselected time block; otherwise, returns the slicer style.
wholeSlicerStyle
▸ wholeSlicerStyle(value?): any
Gets or sets the style of the whole slicer.
example
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
var activeSheet = spread.getActiveSheet();
var datas = [
["1", "NewYork", new Date("1968/6/8"), "80", "180"],
["4", "NewYork", new Date("1972/7/3"), "72", "168"],
["4", "NewYork", new Date("1964/3/2"), "71", "179"],
["5", "Washington", new Date("1972/8/8"),"80", "171"],
["6", "Washington", new Date("1986/2/2"), "89", "161"],
["7", "Washington", new Date("2012/2/15"), "71", "240"]];
var table = activeSheet.tables.addFromDataSource("table1", 2, 2, datas);
var dataColumns = ["Name", "City", "Birthday", "Weight", "Height"];
table.setColumnName(0, dataColumns[0]);
table.setColumnName(1, dataColumns[1]);
table.setColumnName(2, dataColumns[2]);
table.setColumnName(3, dataColumns[3]);
table.setColumnName(4, dataColumns[4]);
var pivotTable = activeSheet.pivotTables.add('pivotTable1', table.name(), 11, 1);
pivotTable.add('Birthday', 'Birthday', 1);
var timeline = activeSheet.slicers.add('timeline1', 'pivotTable1', 'Birthday', GC.Spread.Sheets.Slicers.TimelineStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTimeline);
var style = new GC.Spread.Sheets.Slicers.TimelineStyle()
style.wholeSlicerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('red', 'blue', '12pt Calibri'));
style.headerStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo(undefined, 'green', '14pt Calibri'));
style.timeLevelStyle(new GC.Spread.Sheets.Slicers.SlicerStyleInfo('yellow'));
timeline.style(style);
Parameters
| Name | Type |
|---|---|
value? |
SlicerStyleInfo |
Returns
any
If no value is set, returns the style of the whole slicer; otherwise, returns the slicer style.