@univerjs-pro/sheets-chart-ui v0.5.4


Interface: IFWorksheetChartMixin

Defined in: packages/sheets-chart-ui/src/facade/f-worksheet.ts:13

Methods

getCharts()

getCharts(): FChart[]

Defined in: packages/sheets-chart-ui/src/facade/f-worksheet.ts:84

Returns an array of charts on this sheet.

Returns

FChart[]

  • An array of charts on this sheet.

Example

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const charts = fSheet.getCharts();
console.log(charts.length); //chart count

insertChart()

insertChart(chartBuildInfo): Promise<FChart>

Defined in: packages/sheets-chart-ui/src/facade/f-worksheet.ts:30

Adds a new chart to this sheet.

Parameters

ParameterTypeDescription
chartBuildInfoIChartBuilderInfoThe chart builder info.

Returns

Promise<FChart>

  • The new chart.

Example

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartInfo = fSheet.newChart()
  .addRange('A1:B8')
  .setChartType(ChartTypeBits.Column)
  .setPosition(1, 1, 0, 0)
  .build();
const fChart = await fSheet.insertChart(chartInfo);

newChart()

newChart(fChart?): FChartBuilderBase

Defined in: packages/sheets-chart-ui/src/facade/f-worksheet.ts:71

Returns a builder to create a new chart for this sheet.The builder will not automatically create the chart. You must call build() on the returned builder to create the chart by calling insertChart(chartBuilder).

Parameters

ParameterTypeDescription
fChart?FChartThe chart to update.

Returns

FChartBuilderBase

  • a new chart builder

Description

If the fChart is provided, the builder will be initialized with the existing chart’s data.

Example

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartBuilder = fSheet.newChart();
const chartInfo = chartBuilder.addRange('A1:B8')
  .setChartType(ChartTypeBits.Column)
  .setPosition(1, 1, 0, 0)
  .setWidth(600)
  .setHeight(400)
  .build();
fSheet.insertChart(chartInfo);

registerChartTheme()

registerChartTheme(themeName, theme): void

Defined in: packages/sheets-chart-ui/src/facade/f-worksheet.ts:120

Univer chart is base on echarts, you can register your own theme by echart theme builder.

Parameters

ParameterTypeDescription
themeNamestringThe name of the theme.
themeIEchartThemeThe theme object.

Returns

void

Description

The theme object should be a valid echarts theme object.The online builder is available at https://echarts.apache.org/zh/theme-builder.html

Example

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
// register your theme
const theme = {}; // your theme object
fSheet.registerChartTheme('myTheme', theme);
// use your theme for chart
const chartBuilder = fSheet.newChart().asLineChart();
chartBuilder.setTheme('myTheme');
const chartInfo = chartBuilder.addRange('A1:B8').build();
fSheet.insertChart(chartInfo);

removeChart()

removeChart(chart): Promise<boolean>

Defined in: packages/sheets-chart-ui/src/facade/f-worksheet.ts:99

Removes a chart from the parent sheet.

Parameters

ParameterTypeDescription
chartFChartThe chart to remove.

Returns

Promise<boolean>

Example

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const charts = fSheet.getCharts();
if (charts.length > 0){
   fSheet.removeChart(charts[0]);
}

updateChart()

updateChart(chartBuildInfo): void

Defined in: packages/sheets-chart-ui/src/facade/f-worksheet.ts:50

Updates the chart on this sheet. This api can not update source range, please use FChart.updateRange.

Parameters

ParameterTypeDescription
chartBuildInfoIChartBuilderInfoThe chart builder info.

Returns

void

Example

const fWorkbook = univerAPI.getActiveWorkbook();
const fSheet = fWorkbook.getActiveSheet();
const chartInfo = fSheet.getCharts()[0];
if(chartInfo){
     const chartBuilder = fSheet.newChart(chartInfo);
    const buildInfo =chartBuilder
     .setChartType(ChartTypeBits.Column)
     .setOptions('legend.position', 'right')
     .build();
   fSheet.updateChart(buildInfo);
}