chart-creation

Chart Creation (WPS JS API)

⚠️ Important: To create charts in a WPS add-in, you must use the ws.Shapes.AddChart2() method! ❌ Do not use ws.ChartObjects.Add() (this method is not supported in WPS)

AddChart2(Style, XlChartType, Left, Top, Width, Height) parameters:

• Style: Chart style number (must use 0 or a positive integer; -1 is prohibited)
• XlChartType: 4=xlLine (line), 51=xlColumnClustered (column), 5=xlPie (pie), 54=xlColumnStacked (stacked column)
• Left/Top/Width/Height: Position and size (in pixels)

Unsupported chart types (will crash or appear blank)

• ❌ K-line chart/candlestick chart/OHLC (88/89/90) — not supported in WPS
• ❌ Stock chart (88/89/90) — not supported in WPS
• For stock price data, use a line chart (closing price trend) + column chart (trading volume) instead, displayed in two separate charts

Chart Best Practices

• Each chart should be at least 560×320 pixels; do not make it too small
• Leave 340px of vertical spacing between multiple charts
• One chart should show only one theme; do not cram all data into a single chart

Chart Colors and Styles

After creating a chart, you must set the color for each data series individually to avoid the default gray:

try {
  var dataRange = ws.Range("A1:C20");
  var lastRow = 20;
  var chartTop = (lastRow + 2) * 20;
  var shape = ws.Shapes.AddChart2(0, 4, 20, chartTop, 600, 340);
  var chart = shape.Chart;
  chart.SetSourceData(dataRange);
  chart.HasTitle = true;
  chart.ChartTitle.Text = "趋势分析";

  try {
    chart.SeriesCollection.Item(1).Format.Line.ForeColor.RGB = 0xFF4500;
    chart.SeriesCollection.Item(1).Format.Line.Weight = 2.5;
    chart.SeriesCollection.Item(2).Format.Line.ForeColor.RGB = 0x0000FF;
    chart.SeriesCollection.Item(2).Format.Line.Weight = 2.5;
    chart.SeriesCollection.Item(3).Format.Line.ForeColor.RGB = 0x00AA00;
    chart.SeriesCollection.Item(3).Format.Line.Weight = 2.5;
  } catch(ce) {}

  try {
    chart.SeriesCollection.Item(1).Format.Fill.ForeColor.RGB = 0xE8A040;
  } catch(ce) {}
} catch(e) {
  ws.Range("F1").Value2 = "趋势";
  for (var i = 2; i <= lastRow; i++) {
    var cur = ws.Range("B"+i).Value2, prev = ws.Range("B"+(i-1)).Value2;
    ws.Range("F"+i).Value2 = cur > prev ? "▲" : (cur < prev ? "▼" : "→");
  }
}

Chart Color Scheme (BGR Format)

Purpose	BGR Color Value	Visual Effect
Series 1 (main line/closing price)	0xFF4500	Vivid blue
Series 2 (comparison line/opening price)	0x0000FF	Red
Series 3 (auxiliary line/average price)	0x00AA00	Green
Series 4 (reference line)	0x00CCFF	Orange
Column chart (trading volume)	0xE8A040	Golden orange
Up-day columns	0x0000FF	Red
Down-day columns	0x00AA00	Green

⚠️ Chart code must be wrapped in try/catch. Color settings must also be wrapped in try/catch.