[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

툴팁

툴팁(Tooltip)은 데이터 포인트, 선 또는 기타 시각적 요소와 같은 차트 요소에 대한 추가 정보와 세부 데이터를 제공하여 사용자의 이해를 높입니다.

데이터 차트에서 툴팁을 구현하려면 IPlotConfigTooltipOption 및 IContentEncodingOption 인터페이스를 사용합니다. 이들은 툴팁의 스타일과 내용을 정의합니다.

image

툴팁 속성

데이터 차트에서는 아래 표에 나와 있는 속성들을 사용하여 툴팁을 구성합니다.

속성

설명

dataChartConfig.plots[0].encodings.tooltip

이 속성을 사용하면 툴팁에 표시할 필드를 설정할 수 있습니다. 이 속성이 명시적으로 정의되지 않은 경우, 데이터 차트는 차트에 바인딩된 모든 필드를 자동으로 추가합니다. 더 자세한 내용은 데이터 바인딩 문서를 참조하시기 바랍니다.

dataChartConfig.plots[0].config.tooltip

이 속성을 사용하면 툴팁의 스타일을 설정하고 툴팁의 표시 여부를 제어할 수 있습니다. config.tooltip 속성이 null인 경우, encodings.tooltip이 정의되어 있더라도 툴팁이 표시되지 않습니다.

참고:

  • 동일한 필드는 툴팁에 여러 번 표시할 수 없습니다.

  • 동일한 필드는 툴팁에서 중복될 수 없습니다.

  • 여러 필드가 바인딩된 경우, 툴팁에는 처음 바인딩된 필드를 기준으로 정보가 표시됩니다.

  • 툴팁에 Aggregate 필드가 GC.Spread.Sheets.DataCharts.Aggregate.average로 설정되어 있으면, 데이터는 "0.00" 형식으로 포맷됩니다.

코드 사용 예시

다음 코드 샘플은 데이터 차트에서 툴팁을 구성하는 방법을 보여줍니다.

이 예제는 "데이터 차트 생성하기" 페이지에서 언급된 salesTable 데이터를 사용합니다.

따라서, 해당 페이지에서 안내한 기본 설정 단계를 완료해야 합니다. 설정을 완료한 후에는 아래의 코드를 사용해 툴팁을 구성할 수 있습니다. 또한, 필요에 따라 데이터 소스를 자유롭게 커스터마이징할 수 있습니다.

// dataChartConfig.plots[0].config.tooltip
const sheet = spread.getSheet(0);
sheet.name("ToolTip Config");
sheet.setValue(18, 0, "Hover Over the Data Chart");
sheet.setValue(19, 0, "Data Chart will try to add all the fields bound in the current chart");
const dataChart = sheet.dataCharts.add('data-chart', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart.setChartConfig({
        tableName: 'Sales',
        plots: [
            {
                type: GC.Spread.Sheets.DataCharts.DataChartType.column,
                encodings: {
                    values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                    category: { field: 'Product' },
                    color: { field: 'Product' },
                },
                config: {
                // 이 속성을 설정하면 툴팁의 스타일을 지정하고 툴팁 표시 여부를 제어할 수 있습니다.
                // 이 속성이 null이면, 툴팁이 표시되지 않습니다.
                // encodings.tooltip 속성이 설정되어 있어도 마찬가지입니다.
                    tooltip: [{
                        style: {
                            fill: { type: "CssColor", color: "#fff" },
                            stroke: { type: "CssColor", color: "#E0E0E0" },
                            strokeWidth: 2,
                        },
                        textStyle: {
                            color: "#4a4a4a",
                            fontFamily: "Calibri",
                            fontSize: 12,
                            fontStyle: GC.Spread.Sheets.DataCharts.FontStyle.italic,
                            fontWeight: "Bold",
                            writingMode: GC.Spread.Sheets.DataCharts.Orientation.horizontal,
                            textDecoration: { underline: true }
                        }
                    }]
                }
            }
        ]
});

// dataChartConfig.plots[0].encodings.tooltip
const sheet1 = spread.getSheet(1);
sheet1.name("Binding Fields");
sheet1.setValue(18, 0, "Hover Over the Data Chart");
sheet1.setValue(19, 0, "Tooltip Field: Salesman, Aggregate: COUNT");
sheet1.setValue(20, 0, "Tooltip Field: Sales, Aggregate: AVERAGE");
const dataChart2 = sheet1.dataCharts.add('data-chart-2', 10, 10, 480, 300, GC.Spread.Sheets.DataCharts.DataChartType.column);

dataChart2.setChartConfig({
        tableName: 'Sales',
        plots: [
            {
                type: GC.Spread.Sheets.DataCharts.DataChartType.column,
                encodings: {
                    values: [{ field: 'Sales', aggregate: GC.Spread.Sheets.DataCharts.Aggregate.sum }],
                    category: { field: 'Product' },
                    color: { field: 'Product' },
                // 일부 필드를 “dataChartConfig.plots[0].encodings.tooltip”에 바인딩합니다.
                // 사용자가 이 속성을 설정하지 않으면, 데이터 차트는 현재 차트에 바인딩된 모든 필드를 툴팁에 추가하려고 시도합니다.
                    tooltip: [
                        { field: "Salesman", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.count },
                        { field: "Sales", aggregate: GC.Spread.Sheets.DataCharts.Aggregate.average }
                    ]
                },
                config: {
                    tooltip: [{
                        style: {
                            fill: { type: "CssColor", color: "#fff" },
                            stroke: { type: "CssColor", color: "#E0E0E0" },
                            strokeWidth: 2,
                        },
                    }]
                }
            }
        ]
});