@techie_doubts/tui.chart.2026 4.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +165 -0
- package/dist/esm/animator.d.ts +32 -0
- package/dist/esm/animator.js +102 -0
- package/dist/esm/brushes/axis.d.ts +3 -0
- package/dist/esm/brushes/axis.js +21 -0
- package/dist/esm/brushes/basic.d.ts +9 -0
- package/dist/esm/brushes/basic.js +95 -0
- package/dist/esm/brushes/boxPlot.d.ts +2 -0
- package/dist/esm/brushes/boxPlot.js +22 -0
- package/dist/esm/brushes/circleLegend.d.ts +2 -0
- package/dist/esm/brushes/circleLegend.js +26 -0
- package/dist/esm/brushes/dataLabel.d.ts +6 -0
- package/dist/esm/brushes/dataLabel.js +176 -0
- package/dist/esm/brushes/exportMenu.d.ts +2 -0
- package/dist/esm/brushes/exportMenu.js +55 -0
- package/dist/esm/brushes/gauge.d.ts +2 -0
- package/dist/esm/brushes/gauge.js +39 -0
- package/dist/esm/brushes/label.d.ts +34 -0
- package/dist/esm/brushes/label.js +165 -0
- package/dist/esm/brushes/legend.d.ts +7 -0
- package/dist/esm/brushes/legend.js +162 -0
- package/dist/esm/brushes/lineSeries.d.ts +5 -0
- package/dist/esm/brushes/lineSeries.js +41 -0
- package/dist/esm/brushes/polygon.d.ts +2 -0
- package/dist/esm/brushes/polygon.js +24 -0
- package/dist/esm/brushes/resetButton.d.ts +3 -0
- package/dist/esm/brushes/resetButton.js +112 -0
- package/dist/esm/brushes/scatterSeries.d.ts +2 -0
- package/dist/esm/brushes/scatterSeries.js +125 -0
- package/dist/esm/brushes/sector.d.ts +2 -0
- package/dist/esm/brushes/sector.js +54 -0
- package/dist/esm/brushes/spectrumLegend.d.ts +14 -0
- package/dist/esm/brushes/spectrumLegend.js +199 -0
- package/dist/esm/charts/areaChart.d.ts +254 -0
- package/dist/esm/charts/areaChart.js +358 -0
- package/dist/esm/charts/barChart.d.ts +203 -0
- package/dist/esm/charts/barChart.js +300 -0
- package/dist/esm/charts/boxPlotChart.d.ts +209 -0
- package/dist/esm/charts/boxPlotChart.js +288 -0
- package/dist/esm/charts/bubbleChart.d.ts +188 -0
- package/dist/esm/charts/bubbleChart.js +263 -0
- package/dist/esm/charts/bulletChart.d.ts +199 -0
- package/dist/esm/charts/bulletChart.js +278 -0
- package/dist/esm/charts/chart.d.ts +133 -0
- package/dist/esm/charts/chart.js +484 -0
- package/dist/esm/charts/columnChart.d.ts +205 -0
- package/dist/esm/charts/columnChart.js +299 -0
- package/dist/esm/charts/columnLineChart.d.ts +271 -0
- package/dist/esm/charts/columnLineChart.js +386 -0
- package/dist/esm/charts/gaugeChart.d.ts +191 -0
- package/dist/esm/charts/gaugeChart.js +279 -0
- package/dist/esm/charts/heatmapChart.d.ts +199 -0
- package/dist/esm/charts/heatmapChart.js +292 -0
- package/dist/esm/charts/lineAreaChart.d.ts +271 -0
- package/dist/esm/charts/lineAreaChart.js +374 -0
- package/dist/esm/charts/lineChart.d.ts +253 -0
- package/dist/esm/charts/lineChart.js +360 -0
- package/dist/esm/charts/lineScatterChart.d.ts +200 -0
- package/dist/esm/charts/lineScatterChart.js +285 -0
- package/dist/esm/charts/nestedPieChart.d.ts +192 -0
- package/dist/esm/charts/nestedPieChart.js +268 -0
- package/dist/esm/charts/pieChart.d.ts +156 -0
- package/dist/esm/charts/pieChart.js +224 -0
- package/dist/esm/charts/radarChart.d.ts +169 -0
- package/dist/esm/charts/radarChart.js +240 -0
- package/dist/esm/charts/radialBarChart.d.ts +172 -0
- package/dist/esm/charts/radialBarChart.js +251 -0
- package/dist/esm/charts/scatterChart.d.ts +184 -0
- package/dist/esm/charts/scatterChart.js +279 -0
- package/dist/esm/charts/treemapChart.d.ts +166 -0
- package/dist/esm/charts/treemapChart.js +239 -0
- package/dist/esm/component/areaSeries.d.ts +96 -0
- package/dist/esm/component/areaSeries.js +474 -0
- package/dist/esm/component/axis.d.ts +40 -0
- package/dist/esm/component/axis.js +176 -0
- package/dist/esm/component/axisTitle.d.ts +25 -0
- package/dist/esm/component/axisTitle.js +67 -0
- package/dist/esm/component/axisUsingCenterY.d.ts +32 -0
- package/dist/esm/component/axisUsingCenterY.js +175 -0
- package/dist/esm/component/backButton.d.ts +13 -0
- package/dist/esm/component/backButton.js +26 -0
- package/dist/esm/component/background.d.ts +10 -0
- package/dist/esm/component/background.js +15 -0
- package/dist/esm/component/boxPlotSeries.d.ts +126 -0
- package/dist/esm/component/boxPlotSeries.js +410 -0
- package/dist/esm/component/boxSeries.d.ts +211 -0
- package/dist/esm/component/boxSeries.js +603 -0
- package/dist/esm/component/boxStackSeries.d.ts +62 -0
- package/dist/esm/component/boxStackSeries.js +447 -0
- package/dist/esm/component/bubbleSeries.d.ts +35 -0
- package/dist/esm/component/bubbleSeries.js +174 -0
- package/dist/esm/component/bulletSeries.d.ts +89 -0
- package/dist/esm/component/bulletSeries.js +392 -0
- package/dist/esm/component/circleLegend.d.ts +10 -0
- package/dist/esm/component/circleLegend.js +37 -0
- package/dist/esm/component/component.d.ts +64 -0
- package/dist/esm/component/component.js +170 -0
- package/dist/esm/component/componentManager.d.ts +23 -0
- package/dist/esm/component/componentManager.js +45 -0
- package/dist/esm/component/dataLabels.d.ts +23 -0
- package/dist/esm/component/dataLabels.js +134 -0
- package/dist/esm/component/exportMenu.d.ts +38 -0
- package/dist/esm/component/exportMenu.js +147 -0
- package/dist/esm/component/gaugeSeries.d.ts +160 -0
- package/dist/esm/component/gaugeSeries.js +447 -0
- package/dist/esm/component/heatmapSeries.d.ts +64 -0
- package/dist/esm/component/heatmapSeries.js +152 -0
- package/dist/esm/component/hoveredSeries.d.ts +27 -0
- package/dist/esm/component/hoveredSeries.js +95 -0
- package/dist/esm/component/legend.d.ts +26 -0
- package/dist/esm/component/legend.js +149 -0
- package/dist/esm/component/lineSeries.d.ts +69 -0
- package/dist/esm/component/lineSeries.js +319 -0
- package/dist/esm/component/noDataText.d.ts +9 -0
- package/dist/esm/component/noDataText.js +31 -0
- package/dist/esm/component/pieSeries.d.ts +137 -0
- package/dist/esm/component/pieSeries.js +390 -0
- package/dist/esm/component/plot.d.ts +37 -0
- package/dist/esm/component/plot.js +163 -0
- package/dist/esm/component/radarSeries.d.ts +85 -0
- package/dist/esm/component/radarSeries.js +222 -0
- package/dist/esm/component/radialAxis.d.ts +26 -0
- package/dist/esm/component/radialAxis.js +210 -0
- package/dist/esm/component/radialBarSeries.d.ts +111 -0
- package/dist/esm/component/radialBarSeries.js +349 -0
- package/dist/esm/component/radialPlot.d.ts +55 -0
- package/dist/esm/component/radialPlot.js +188 -0
- package/dist/esm/component/rangeSelection.d.ts +61 -0
- package/dist/esm/component/rangeSelection.js +150 -0
- package/dist/esm/component/resetButton.d.ts +13 -0
- package/dist/esm/component/resetButton.js +26 -0
- package/dist/esm/component/scatterSeries.d.ts +34 -0
- package/dist/esm/component/scatterSeries.js +159 -0
- package/dist/esm/component/selectedSeries.d.ts +26 -0
- package/dist/esm/component/selectedSeries.js +109 -0
- package/dist/esm/component/spectrumLegend.d.ts +15 -0
- package/dist/esm/component/spectrumLegend.js +76 -0
- package/dist/esm/component/title.d.ts +12 -0
- package/dist/esm/component/title.js +53 -0
- package/dist/esm/component/tooltip.d.ts +41 -0
- package/dist/esm/component/tooltip.js +131 -0
- package/dist/esm/component/treemapSeries.d.ts +57 -0
- package/dist/esm/component/treemapSeries.js +191 -0
- package/dist/esm/component/zeroAxis.d.ts +9 -0
- package/dist/esm/component/zeroAxis.js +49 -0
- package/dist/esm/eventEmitter.d.ts +8 -0
- package/dist/esm/eventEmitter.js +15 -0
- package/dist/esm/helpers/arrayUtil.d.ts +10 -0
- package/dist/esm/helpers/arrayUtil.js +54 -0
- package/dist/esm/helpers/axes.d.ts +67 -0
- package/dist/esm/helpers/axes.js +345 -0
- package/dist/esm/helpers/boxSeries.d.ts +5 -0
- package/dist/esm/helpers/boxSeries.js +71 -0
- package/dist/esm/helpers/calculator.d.ts +19 -0
- package/dist/esm/helpers/calculator.js +153 -0
- package/dist/esm/helpers/color.d.ts +153 -0
- package/dist/esm/helpers/color.js +218 -0
- package/dist/esm/helpers/colorSpectrum.d.ts +5 -0
- package/dist/esm/helpers/colorSpectrum.js +17 -0
- package/dist/esm/helpers/coordinate.d.ts +9 -0
- package/dist/esm/helpers/coordinate.js +51 -0
- package/dist/esm/helpers/dataLabels.d.ts +36 -0
- package/dist/esm/helpers/dataLabels.js +405 -0
- package/dist/esm/helpers/dom.d.ts +2 -0
- package/dist/esm/helpers/dom.js +8 -0
- package/dist/esm/helpers/downloader.d.ts +7 -0
- package/dist/esm/helpers/downloader.js +287 -0
- package/dist/esm/helpers/formatDate.d.ts +16 -0
- package/dist/esm/helpers/formatDate.js +140 -0
- package/dist/esm/helpers/geometric.d.ts +3 -0
- package/dist/esm/helpers/geometric.js +35 -0
- package/dist/esm/helpers/googleAnalytics.d.ts +1 -0
- package/dist/esm/helpers/googleAnalytics.js +39 -0
- package/dist/esm/helpers/htmlSanitizer.d.ts +1 -0
- package/dist/esm/helpers/htmlSanitizer.js +86 -0
- package/dist/esm/helpers/legend.d.ts +9 -0
- package/dist/esm/helpers/legend.js +47 -0
- package/dist/esm/helpers/pieSeries.d.ts +15 -0
- package/dist/esm/helpers/pieSeries.js +72 -0
- package/dist/esm/helpers/plot.d.ts +2 -0
- package/dist/esm/helpers/plot.js +4 -0
- package/dist/esm/helpers/radarSeries.d.ts +1 -0
- package/dist/esm/helpers/radarSeries.js +7 -0
- package/dist/esm/helpers/range.d.ts +6 -0
- package/dist/esm/helpers/range.js +16 -0
- package/dist/esm/helpers/responders.d.ts +37 -0
- package/dist/esm/helpers/responders.js +197 -0
- package/dist/esm/helpers/sector.d.ts +55 -0
- package/dist/esm/helpers/sector.js +117 -0
- package/dist/esm/helpers/squarifier.d.ts +8 -0
- package/dist/esm/helpers/squarifier.js +110 -0
- package/dist/esm/helpers/style.d.ts +14 -0
- package/dist/esm/helpers/style.js +48 -0
- package/dist/esm/helpers/theme.d.ts +58 -0
- package/dist/esm/helpers/theme.js +557 -0
- package/dist/esm/helpers/tooltip.d.ts +2 -0
- package/dist/esm/helpers/tooltip.js +18 -0
- package/dist/esm/helpers/tooltipTemplate.d.ts +21 -0
- package/dist/esm/helpers/tooltipTemplate.js +147 -0
- package/dist/esm/helpers/utils.d.ts +42 -0
- package/dist/esm/helpers/utils.js +268 -0
- package/dist/esm/helpers/validation.d.ts +6 -0
- package/dist/esm/helpers/validation.js +16 -0
- package/dist/esm/index.d.ts +40 -0
- package/dist/esm/index.js +75 -0
- package/dist/esm/message.d.ts +11 -0
- package/dist/esm/message.js +11 -0
- package/dist/esm/painter.d.ts +27 -0
- package/dist/esm/painter.js +88 -0
- package/dist/esm/responderDetectors.d.ts +6 -0
- package/dist/esm/responderDetectors.js +124 -0
- package/dist/esm/scale/coordinateScaleCalculator.d.ts +24 -0
- package/dist/esm/scale/coordinateScaleCalculator.js +174 -0
- package/dist/esm/scale/datetimeScaleCalculator.d.ts +20 -0
- package/dist/esm/scale/datetimeScaleCalculator.js +59 -0
- package/dist/esm/store/axes.d.ts +30 -0
- package/dist/esm/store/axes.js +282 -0
- package/dist/esm/store/category.d.ts +4 -0
- package/dist/esm/store/category.js +73 -0
- package/dist/esm/store/colorValueScale.d.ts +3 -0
- package/dist/esm/store/colorValueScale.js +56 -0
- package/dist/esm/store/dataRange.d.ts +4 -0
- package/dist/esm/store/dataRange.js +170 -0
- package/dist/esm/store/gaugeAxes.d.ts +4 -0
- package/dist/esm/store/gaugeAxes.js +175 -0
- package/dist/esm/store/heatmapAxes.d.ts +3 -0
- package/dist/esm/store/heatmapAxes.js +98 -0
- package/dist/esm/store/heatmapSeriesData.d.ts +3 -0
- package/dist/esm/store/heatmapSeriesData.js +34 -0
- package/dist/esm/store/layout.d.ts +12 -0
- package/dist/esm/store/layout.js +487 -0
- package/dist/esm/store/legend.d.ts +3 -0
- package/dist/esm/store/legend.js +435 -0
- package/dist/esm/store/nestedPieSeriesData.d.ts +3 -0
- package/dist/esm/store/nestedPieSeriesData.js +49 -0
- package/dist/esm/store/options.d.ts +3 -0
- package/dist/esm/store/options.js +62 -0
- package/dist/esm/store/plot.d.ts +3 -0
- package/dist/esm/store/plot.js +102 -0
- package/dist/esm/store/radialAxes.d.ts +8 -0
- package/dist/esm/store/radialAxes.js +199 -0
- package/dist/esm/store/reactive.d.ts +11 -0
- package/dist/esm/store/reactive.js +196 -0
- package/dist/esm/store/root.d.ts +3 -0
- package/dist/esm/store/root.js +46 -0
- package/dist/esm/store/scale.d.ts +3 -0
- package/dist/esm/store/scale.js +102 -0
- package/dist/esm/store/seriesData.d.ts +3 -0
- package/dist/esm/store/seriesData.js +299 -0
- package/dist/esm/store/stackSeriesData.d.ts +8 -0
- package/dist/esm/store/stackSeriesData.js +192 -0
- package/dist/esm/store/store.d.ts +20 -0
- package/dist/esm/store/store.js +112 -0
- package/dist/esm/store/theme.d.ts +3 -0
- package/dist/esm/store/theme.js +139 -0
- package/dist/esm/store/treemapSeriesData.d.ts +4 -0
- package/dist/esm/store/treemapSeriesData.js +93 -0
- package/dist/td-chart.css +127 -0
- package/dist/td-chart.js +41463 -0
- package/dist/td-chart.min.css +6 -0
- package/dist/td-chart.min.js +9 -0
- package/package.json +112 -0
- package/types/brushes.d.ts +30 -0
- package/types/charts.d.ts +152 -0
- package/types/components/axis.d.ts +71 -0
- package/types/components/circleLegend.d.ts +9 -0
- package/types/components/dataLabels.d.ts +119 -0
- package/types/components/exportMenu.d.ts +14 -0
- package/types/components/legend.d.ts +27 -0
- package/types/components/plot.d.ts +8 -0
- package/types/components/radialAxis.d.ts +22 -0
- package/types/components/radialPlot.d.ts +11 -0
- package/types/components/rangeSelection.d.ts +3 -0
- package/types/components/resetButton.d.ts +13 -0
- package/types/components/series.d.ts +386 -0
- package/types/components/spectrumLegend.d.ts +25 -0
- package/types/components/tooltip.d.ts +58 -0
- package/types/components/zoom.d.ts +3 -0
- package/types/eventEmitter.d.ts +12 -0
- package/types/index.d.ts +615 -0
- package/types/options.d.ts +833 -0
- package/types/resizeObserver.d.ts +54 -0
- package/types/store/store.d.ts +564 -0
- package/types/theme.d.ts +670 -0
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import Chart from "./chart";
|
|
2
|
+
import { RadarChartOptions, RadarSeriesData, RadarSeriesInput } from "../../types/options";
|
|
3
|
+
import { RadarChartProps, SelectSeriesInfo } from "../../types/charts";
|
|
4
|
+
/**
|
|
5
|
+
* @class
|
|
6
|
+
* @classdesc Radar Chart
|
|
7
|
+
* @param {Object} props
|
|
8
|
+
* @param {HTMLElement} props.el - The target element to create chart.
|
|
9
|
+
* @param {Object} props.data - Data for making Radar Chart.
|
|
10
|
+
* @param {Array<string>} props.data.categories - Categories.
|
|
11
|
+
* @param {Array<Object>} props.data.series - Series data.
|
|
12
|
+
* @param {string} props.data.series.name - Series name.
|
|
13
|
+
* @param {Array<number>} props.data.series.data - Series data.
|
|
14
|
+
* @param {Object} [props.options] - Options for making Radar Chart.
|
|
15
|
+
* @param {Object} [props.options.chart]
|
|
16
|
+
* @param {string|Object} [props.options.chart.title] - Chart title text or options.
|
|
17
|
+
* @param {string} [props.options.chart.title.text] - Chart title text.
|
|
18
|
+
* @param {number} [props.options.chart.title.offsetX] - Offset value to move title horizontally.
|
|
19
|
+
* @param {number} [props.options.chart.title.offsetY] - Offset value to move title vertically.
|
|
20
|
+
* @param {string} [props.options.chart.title.align] - Chart text align. 'left', 'right', 'center' is available.
|
|
21
|
+
* @param {boolean|Object} [props.options.chart.animation] - Whether to use animation and duration when rendering the initial chart.
|
|
22
|
+
* @param {number|string} [props.options.chart.width] - Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.
|
|
23
|
+
* @param {number|string} [props.options.chart.height] - Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.
|
|
24
|
+
* @param {Object} [props.options.series]
|
|
25
|
+
* @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
|
|
26
|
+
* @param {boolean} [props.options.series.showDot=false] - Whether to show dot or not.
|
|
27
|
+
* @param {boolean} [props.options.series.showArea=false] - Whether to fill area or not.
|
|
28
|
+
* @param {Object} [props.options.circularAxis]
|
|
29
|
+
* @param {Object} [props.options.circularAxis.tick] - Option to adjust tick interval.
|
|
30
|
+
* @param {Object} [props.options.circularAxis.label] - Option to adjust label interval.
|
|
31
|
+
* @param {Object} [props.options.verticalAxis]
|
|
32
|
+
* @param {Object} [props.options.verticalAxis.tick] - Option to adjust tick interval.
|
|
33
|
+
* @param {Object} [props.options.verticalAxis.label] - Option to adjust label interval.
|
|
34
|
+
* @param {Object} [props.options.verticalAxis.scale] - Option to adjust axis minimum, maximum, step size.
|
|
35
|
+
* @param {Object} [props.options.plot]
|
|
36
|
+
* @param {number} [props.options.plot.width] - Width of plot.
|
|
37
|
+
* @param {number} [props.options.plot.height] - Height of plot.
|
|
38
|
+
* @param {boolean} [props.options.plot.type] - Radar plot type. 'spiderweb', 'circle' is available.
|
|
39
|
+
* @param {Object} [props.options.legend]
|
|
40
|
+
* @param {string} [props.options.legend.align] - Legend align. 'top', 'bottom', 'right', 'left' is available.
|
|
41
|
+
* @param {string} [props.options.legend.showCheckbox] - Whether to show checkbox.
|
|
42
|
+
* @param {boolean} [props.options.legend.visible] - Whether to show legend.
|
|
43
|
+
* @param {number} [props.options.legend.width] - Width of legend.
|
|
44
|
+
* @param {Object} [props.options.legend.item] - `width` and `overflow` options of the legend item. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Legend guide} on github.
|
|
45
|
+
* @param {Object} [props.options.exportMenu]
|
|
46
|
+
* @param {boolean} [props.options.exportMenu.visible] - Whether to show export menu.
|
|
47
|
+
* @param {string} [props.options.exportMenu.filename] - File name applied when downloading.
|
|
48
|
+
* @param {Object} [props.options.tooltip]
|
|
49
|
+
* @param {number} [props.options.tooltip.offsetX] - Offset value to move title horizontally.
|
|
50
|
+
* @param {number} [props.options.tooltip.offsetY] - Offset value to move title vertically.
|
|
51
|
+
* @param {Function} [props.options.tooltip.formatter] - Function to format data value.
|
|
52
|
+
* @param {Function} [props.options.tooltip.template] - Function to create custom template. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Tooltip guide} on github.
|
|
53
|
+
* @param {Object} [props.options.responsive] - Rules for changing chart options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Responsive guide} on github.
|
|
54
|
+
* @param {boolean|Object} [props.options.responsive.animation] - Animation duration when the chart is modified.
|
|
55
|
+
* @param {Array<Object>} [props.options.responsive.rules] - Rules for the Chart to Respond.
|
|
56
|
+
* @param {Object} [props.options.lang] - Options for changing the text displayed on the chart or i18n languages.
|
|
57
|
+
* @param {Object} [props.options.lang.noData] - No Data Layer Text.
|
|
58
|
+
* @param {Object} [props.options.theme] - Chart theme options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Radar Chart guide} on github.
|
|
59
|
+
* @param {Object} [props.options.theme.chart] - Chart font theme.
|
|
60
|
+
* @param {Object} [props.options.theme.noData] - No Data Layer Text theme.
|
|
61
|
+
* @param {Object} [props.options.theme.series] - Series theme.
|
|
62
|
+
* @param {Object} [props.options.theme.title] - Title theme.
|
|
63
|
+
* @param {Object} [props.options.theme.circularAxis] - Circular Axis theme.
|
|
64
|
+
* @param {Object} [props.options.theme.verticalAxis] - Vertical Axis theme.
|
|
65
|
+
* @param {Object} [props.options.theme.legend] - Legend theme.
|
|
66
|
+
* @param {Object} [props.options.theme.tooltip] - Tooltip theme.
|
|
67
|
+
* @param {Object} [props.options.theme.plot] - Plot theme.
|
|
68
|
+
* @param {Object} [props.options.theme.exportMenu] - ExportMenu theme.
|
|
69
|
+
* @extends Chart
|
|
70
|
+
*/
|
|
71
|
+
export default class RadarChart extends Chart<RadarChartOptions> {
|
|
72
|
+
constructor({ el, options, data }: RadarChartProps);
|
|
73
|
+
protected initialize(): void;
|
|
74
|
+
/**
|
|
75
|
+
* Add data.
|
|
76
|
+
* @param {Array<number>} data - Array of data to be added.
|
|
77
|
+
* @param {string} category - Category to be added.
|
|
78
|
+
* @api
|
|
79
|
+
* @example
|
|
80
|
+
* chart.addData([10, 20], '6');
|
|
81
|
+
*/
|
|
82
|
+
addData(data: number[], category: string): void;
|
|
83
|
+
/**
|
|
84
|
+
* Add series.
|
|
85
|
+
* @param {Object} data - Data to be added.
|
|
86
|
+
* @param {string} data.name - Series name.
|
|
87
|
+
* @param {Array<number>} data.data - Array of data to be added.
|
|
88
|
+
* @api
|
|
89
|
+
* @example
|
|
90
|
+
* chart.addSeries({
|
|
91
|
+
* name: 'newSeries',
|
|
92
|
+
* data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
|
|
93
|
+
* });
|
|
94
|
+
*/
|
|
95
|
+
addSeries(data: RadarSeriesInput): void;
|
|
96
|
+
/**
|
|
97
|
+
* Convert the chart data to new data.
|
|
98
|
+
* @param {Object} data - Data to be set.
|
|
99
|
+
* @api
|
|
100
|
+
* @example
|
|
101
|
+
* chart.setData({
|
|
102
|
+
* categories: ['1', '2', '3'],
|
|
103
|
+
* series: [
|
|
104
|
+
* {
|
|
105
|
+
* name: 'new series',
|
|
106
|
+
* data: [1, 2, 3],
|
|
107
|
+
* },
|
|
108
|
+
* {
|
|
109
|
+
* name: 'new series2',
|
|
110
|
+
* data: [4, 5, 6],
|
|
111
|
+
* }
|
|
112
|
+
* ]
|
|
113
|
+
* });
|
|
114
|
+
*/
|
|
115
|
+
setData(data: RadarSeriesData): void;
|
|
116
|
+
/**
|
|
117
|
+
* Convert the chart options to new options.
|
|
118
|
+
* @param {Object} options - Chart options.
|
|
119
|
+
* @api
|
|
120
|
+
* @example
|
|
121
|
+
* chart.setOptions({
|
|
122
|
+
* chart: {
|
|
123
|
+
* width: 500,
|
|
124
|
+
* height: 'auto',
|
|
125
|
+
* title: 'Energy Usage',
|
|
126
|
+
* },
|
|
127
|
+
* series: {
|
|
128
|
+
* selectable: true,
|
|
129
|
+
* },
|
|
130
|
+
* tooltip: {
|
|
131
|
+
* formatter: (value) => `${value}kWh`,
|
|
132
|
+
* },
|
|
133
|
+
* });
|
|
134
|
+
*/
|
|
135
|
+
setOptions(options: RadarChartOptions): void;
|
|
136
|
+
/**
|
|
137
|
+
* Update chart options.
|
|
138
|
+
* @param {Object} options - Chart options.
|
|
139
|
+
* @api
|
|
140
|
+
* @example
|
|
141
|
+
* chart.updateOptions({
|
|
142
|
+
* chart: {
|
|
143
|
+
* height: 'auto',
|
|
144
|
+
* title: 'Energy Usage',
|
|
145
|
+
* },
|
|
146
|
+
* tooltip: {
|
|
147
|
+
* formatter: (value) => `${value}kWh`,
|
|
148
|
+
* },
|
|
149
|
+
* });
|
|
150
|
+
*/
|
|
151
|
+
updateOptions(options: RadarChartOptions): void;
|
|
152
|
+
/**
|
|
153
|
+
* Show tooltip.
|
|
154
|
+
* @param {Object} seriesInfo - Information of the series for the tooltip to be displayed.
|
|
155
|
+
* @param {number} seriesInfo.seriesIndex - Index of series.
|
|
156
|
+
* @param {number} seriesInfo.index - Index of data within series.
|
|
157
|
+
* @api
|
|
158
|
+
* @example
|
|
159
|
+
* chart.showTooltip({index: 1, seriesIndex: 2});
|
|
160
|
+
*/
|
|
161
|
+
showTooltip(seriesInfo: SelectSeriesInfo): void;
|
|
162
|
+
/**
|
|
163
|
+
* Hide tooltip.
|
|
164
|
+
* @api
|
|
165
|
+
* @example
|
|
166
|
+
* chart.hideTooltip();
|
|
167
|
+
*/
|
|
168
|
+
hideTooltip(): void;
|
|
169
|
+
}
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
import Chart from "./chart";
|
|
2
|
+
import dataRange from "../store/dataRange";
|
|
3
|
+
import scale from "../store/scale";
|
|
4
|
+
import radialAxes from "../store/radialAxes";
|
|
5
|
+
import Legend from "../component/legend";
|
|
6
|
+
import RadarSeries from "../component/radarSeries";
|
|
7
|
+
import RadialPlot from "../component/radialPlot";
|
|
8
|
+
import Title from "../component/title";
|
|
9
|
+
import ExportMenu from "../component/exportMenu";
|
|
10
|
+
import SelectedSeries from "../component/selectedSeries";
|
|
11
|
+
import HoveredSeries from "../component/hoveredSeries";
|
|
12
|
+
import Tooltip from "../component/tooltip";
|
|
13
|
+
import RadialAxis from "../component/radialAxis";
|
|
14
|
+
import Background from "../component/background";
|
|
15
|
+
import NoDataText from "../component/noDataText";
|
|
16
|
+
import * as basicBrush from "../brushes/basic";
|
|
17
|
+
import * as legendBrush from "../brushes/legend";
|
|
18
|
+
import * as labelBrush from "../brushes/label";
|
|
19
|
+
import * as exportMenuBrush from "../brushes/exportMenu";
|
|
20
|
+
import * as polygonBrush from "../brushes/polygon";
|
|
21
|
+
import * as axisBrush from "../brushes/axis";
|
|
22
|
+
import * as lineSeriesBrush from "../brushes/lineSeries";
|
|
23
|
+
/**
|
|
24
|
+
* @class
|
|
25
|
+
* @classdesc Radar Chart
|
|
26
|
+
* @param {Object} props
|
|
27
|
+
* @param {HTMLElement} props.el - The target element to create chart.
|
|
28
|
+
* @param {Object} props.data - Data for making Radar Chart.
|
|
29
|
+
* @param {Array<string>} props.data.categories - Categories.
|
|
30
|
+
* @param {Array<Object>} props.data.series - Series data.
|
|
31
|
+
* @param {string} props.data.series.name - Series name.
|
|
32
|
+
* @param {Array<number>} props.data.series.data - Series data.
|
|
33
|
+
* @param {Object} [props.options] - Options for making Radar Chart.
|
|
34
|
+
* @param {Object} [props.options.chart]
|
|
35
|
+
* @param {string|Object} [props.options.chart.title] - Chart title text or options.
|
|
36
|
+
* @param {string} [props.options.chart.title.text] - Chart title text.
|
|
37
|
+
* @param {number} [props.options.chart.title.offsetX] - Offset value to move title horizontally.
|
|
38
|
+
* @param {number} [props.options.chart.title.offsetY] - Offset value to move title vertically.
|
|
39
|
+
* @param {string} [props.options.chart.title.align] - Chart text align. 'left', 'right', 'center' is available.
|
|
40
|
+
* @param {boolean|Object} [props.options.chart.animation] - Whether to use animation and duration when rendering the initial chart.
|
|
41
|
+
* @param {number|string} [props.options.chart.width] - Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.
|
|
42
|
+
* @param {number|string} [props.options.chart.height] - Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.
|
|
43
|
+
* @param {Object} [props.options.series]
|
|
44
|
+
* @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
|
|
45
|
+
* @param {boolean} [props.options.series.showDot=false] - Whether to show dot or not.
|
|
46
|
+
* @param {boolean} [props.options.series.showArea=false] - Whether to fill area or not.
|
|
47
|
+
* @param {Object} [props.options.circularAxis]
|
|
48
|
+
* @param {Object} [props.options.circularAxis.tick] - Option to adjust tick interval.
|
|
49
|
+
* @param {Object} [props.options.circularAxis.label] - Option to adjust label interval.
|
|
50
|
+
* @param {Object} [props.options.verticalAxis]
|
|
51
|
+
* @param {Object} [props.options.verticalAxis.tick] - Option to adjust tick interval.
|
|
52
|
+
* @param {Object} [props.options.verticalAxis.label] - Option to adjust label interval.
|
|
53
|
+
* @param {Object} [props.options.verticalAxis.scale] - Option to adjust axis minimum, maximum, step size.
|
|
54
|
+
* @param {Object} [props.options.plot]
|
|
55
|
+
* @param {number} [props.options.plot.width] - Width of plot.
|
|
56
|
+
* @param {number} [props.options.plot.height] - Height of plot.
|
|
57
|
+
* @param {boolean} [props.options.plot.type] - Radar plot type. 'spiderweb', 'circle' is available.
|
|
58
|
+
* @param {Object} [props.options.legend]
|
|
59
|
+
* @param {string} [props.options.legend.align] - Legend align. 'top', 'bottom', 'right', 'left' is available.
|
|
60
|
+
* @param {string} [props.options.legend.showCheckbox] - Whether to show checkbox.
|
|
61
|
+
* @param {boolean} [props.options.legend.visible] - Whether to show legend.
|
|
62
|
+
* @param {number} [props.options.legend.width] - Width of legend.
|
|
63
|
+
* @param {Object} [props.options.legend.item] - `width` and `overflow` options of the legend item. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Legend guide} on github.
|
|
64
|
+
* @param {Object} [props.options.exportMenu]
|
|
65
|
+
* @param {boolean} [props.options.exportMenu.visible] - Whether to show export menu.
|
|
66
|
+
* @param {string} [props.options.exportMenu.filename] - File name applied when downloading.
|
|
67
|
+
* @param {Object} [props.options.tooltip]
|
|
68
|
+
* @param {number} [props.options.tooltip.offsetX] - Offset value to move title horizontally.
|
|
69
|
+
* @param {number} [props.options.tooltip.offsetY] - Offset value to move title vertically.
|
|
70
|
+
* @param {Function} [props.options.tooltip.formatter] - Function to format data value.
|
|
71
|
+
* @param {Function} [props.options.tooltip.template] - Function to create custom template. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Tooltip guide} on github.
|
|
72
|
+
* @param {Object} [props.options.responsive] - Rules for changing chart options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Responsive guide} on github.
|
|
73
|
+
* @param {boolean|Object} [props.options.responsive.animation] - Animation duration when the chart is modified.
|
|
74
|
+
* @param {Array<Object>} [props.options.responsive.rules] - Rules for the Chart to Respond.
|
|
75
|
+
* @param {Object} [props.options.lang] - Options for changing the text displayed on the chart or i18n languages.
|
|
76
|
+
* @param {Object} [props.options.lang.noData] - No Data Layer Text.
|
|
77
|
+
* @param {Object} [props.options.theme] - Chart theme options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Radar Chart guide} on github.
|
|
78
|
+
* @param {Object} [props.options.theme.chart] - Chart font theme.
|
|
79
|
+
* @param {Object} [props.options.theme.noData] - No Data Layer Text theme.
|
|
80
|
+
* @param {Object} [props.options.theme.series] - Series theme.
|
|
81
|
+
* @param {Object} [props.options.theme.title] - Title theme.
|
|
82
|
+
* @param {Object} [props.options.theme.circularAxis] - Circular Axis theme.
|
|
83
|
+
* @param {Object} [props.options.theme.verticalAxis] - Vertical Axis theme.
|
|
84
|
+
* @param {Object} [props.options.theme.legend] - Legend theme.
|
|
85
|
+
* @param {Object} [props.options.theme.tooltip] - Tooltip theme.
|
|
86
|
+
* @param {Object} [props.options.theme.plot] - Plot theme.
|
|
87
|
+
* @param {Object} [props.options.theme.exportMenu] - ExportMenu theme.
|
|
88
|
+
* @extends Chart
|
|
89
|
+
*/
|
|
90
|
+
export default class RadarChart extends Chart {
|
|
91
|
+
constructor({ el, options, data }) {
|
|
92
|
+
super({
|
|
93
|
+
el,
|
|
94
|
+
options,
|
|
95
|
+
series: {
|
|
96
|
+
radar: data.series,
|
|
97
|
+
},
|
|
98
|
+
categories: data.categories,
|
|
99
|
+
modules: [dataRange, scale, radialAxes],
|
|
100
|
+
});
|
|
101
|
+
}
|
|
102
|
+
initialize() {
|
|
103
|
+
super.initialize();
|
|
104
|
+
this.componentManager.add(Background);
|
|
105
|
+
this.componentManager.add(Title);
|
|
106
|
+
this.componentManager.add(Legend);
|
|
107
|
+
this.componentManager.add(RadialPlot);
|
|
108
|
+
this.componentManager.add(RadialAxis);
|
|
109
|
+
this.componentManager.add(RadarSeries);
|
|
110
|
+
this.componentManager.add(ExportMenu, { chartEl: this.el });
|
|
111
|
+
this.componentManager.add(HoveredSeries);
|
|
112
|
+
this.componentManager.add(SelectedSeries);
|
|
113
|
+
this.componentManager.add(Tooltip, { chartEl: this.el });
|
|
114
|
+
this.componentManager.add(NoDataText);
|
|
115
|
+
this.painter.addGroups([
|
|
116
|
+
basicBrush,
|
|
117
|
+
legendBrush,
|
|
118
|
+
labelBrush,
|
|
119
|
+
exportMenuBrush,
|
|
120
|
+
polygonBrush,
|
|
121
|
+
axisBrush,
|
|
122
|
+
lineSeriesBrush,
|
|
123
|
+
]);
|
|
124
|
+
}
|
|
125
|
+
/**
|
|
126
|
+
* Add data.
|
|
127
|
+
* @param {Array<number>} data - Array of data to be added.
|
|
128
|
+
* @param {string} category - Category to be added.
|
|
129
|
+
* @api
|
|
130
|
+
* @example
|
|
131
|
+
* chart.addData([10, 20], '6');
|
|
132
|
+
*/
|
|
133
|
+
addData(data, category) {
|
|
134
|
+
this.animationControlFlag.updating = true;
|
|
135
|
+
this.resetSeries();
|
|
136
|
+
this.store.dispatch('addData', { data, category });
|
|
137
|
+
}
|
|
138
|
+
/**
|
|
139
|
+
* Add series.
|
|
140
|
+
* @param {Object} data - Data to be added.
|
|
141
|
+
* @param {string} data.name - Series name.
|
|
142
|
+
* @param {Array<number>} data.data - Array of data to be added.
|
|
143
|
+
* @api
|
|
144
|
+
* @example
|
|
145
|
+
* chart.addSeries({
|
|
146
|
+
* name: 'newSeries',
|
|
147
|
+
* data: [10, 100, 50, 40, 70, 55, 33, 70, 90, 110],
|
|
148
|
+
* });
|
|
149
|
+
*/
|
|
150
|
+
addSeries(data) {
|
|
151
|
+
this.resetSeries();
|
|
152
|
+
this.store.dispatch('addSeries', { data });
|
|
153
|
+
}
|
|
154
|
+
/**
|
|
155
|
+
* Convert the chart data to new data.
|
|
156
|
+
* @param {Object} data - Data to be set.
|
|
157
|
+
* @api
|
|
158
|
+
* @example
|
|
159
|
+
* chart.setData({
|
|
160
|
+
* categories: ['1', '2', '3'],
|
|
161
|
+
* series: [
|
|
162
|
+
* {
|
|
163
|
+
* name: 'new series',
|
|
164
|
+
* data: [1, 2, 3],
|
|
165
|
+
* },
|
|
166
|
+
* {
|
|
167
|
+
* name: 'new series2',
|
|
168
|
+
* data: [4, 5, 6],
|
|
169
|
+
* }
|
|
170
|
+
* ]
|
|
171
|
+
* });
|
|
172
|
+
*/
|
|
173
|
+
setData(data) {
|
|
174
|
+
const { categories, series } = data;
|
|
175
|
+
this.resetSeries();
|
|
176
|
+
this.store.dispatch('setData', { series: { radar: series }, categories });
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* Convert the chart options to new options.
|
|
180
|
+
* @param {Object} options - Chart options.
|
|
181
|
+
* @api
|
|
182
|
+
* @example
|
|
183
|
+
* chart.setOptions({
|
|
184
|
+
* chart: {
|
|
185
|
+
* width: 500,
|
|
186
|
+
* height: 'auto',
|
|
187
|
+
* title: 'Energy Usage',
|
|
188
|
+
* },
|
|
189
|
+
* series: {
|
|
190
|
+
* selectable: true,
|
|
191
|
+
* },
|
|
192
|
+
* tooltip: {
|
|
193
|
+
* formatter: (value) => `${value}kWh`,
|
|
194
|
+
* },
|
|
195
|
+
* });
|
|
196
|
+
*/
|
|
197
|
+
setOptions(options) {
|
|
198
|
+
this.dispatchOptionsEvent('initOptions', options);
|
|
199
|
+
}
|
|
200
|
+
/**
|
|
201
|
+
* Update chart options.
|
|
202
|
+
* @param {Object} options - Chart options.
|
|
203
|
+
* @api
|
|
204
|
+
* @example
|
|
205
|
+
* chart.updateOptions({
|
|
206
|
+
* chart: {
|
|
207
|
+
* height: 'auto',
|
|
208
|
+
* title: 'Energy Usage',
|
|
209
|
+
* },
|
|
210
|
+
* tooltip: {
|
|
211
|
+
* formatter: (value) => `${value}kWh`,
|
|
212
|
+
* },
|
|
213
|
+
* });
|
|
214
|
+
*/
|
|
215
|
+
updateOptions(options) {
|
|
216
|
+
this.resetSeries();
|
|
217
|
+
this.dispatchOptionsEvent('updateOptions', options);
|
|
218
|
+
}
|
|
219
|
+
/**
|
|
220
|
+
* Show tooltip.
|
|
221
|
+
* @param {Object} seriesInfo - Information of the series for the tooltip to be displayed.
|
|
222
|
+
* @param {number} seriesInfo.seriesIndex - Index of series.
|
|
223
|
+
* @param {number} seriesInfo.index - Index of data within series.
|
|
224
|
+
* @api
|
|
225
|
+
* @example
|
|
226
|
+
* chart.showTooltip({index: 1, seriesIndex: 2});
|
|
227
|
+
*/
|
|
228
|
+
showTooltip(seriesInfo) {
|
|
229
|
+
this.eventBus.emit('showTooltip', Object.assign(Object.assign({}, seriesInfo), { state: this.store.state }));
|
|
230
|
+
}
|
|
231
|
+
/**
|
|
232
|
+
* Hide tooltip.
|
|
233
|
+
* @api
|
|
234
|
+
* @example
|
|
235
|
+
* chart.hideTooltip();
|
|
236
|
+
*/
|
|
237
|
+
hideTooltip() {
|
|
238
|
+
this.eventBus.emit('hideTooltip');
|
|
239
|
+
}
|
|
240
|
+
}
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
import Chart from "./chart";
|
|
2
|
+
import { RadialBarChartOptions, RadialBarSeriesData, RadialBarSeriesType } from "../../types/options";
|
|
3
|
+
import { RadialBarChartProps, SelectSeriesInfo } from "../../types/charts";
|
|
4
|
+
/**
|
|
5
|
+
* @class
|
|
6
|
+
* @classdesc RadialBar Chart
|
|
7
|
+
* @param {Object} props
|
|
8
|
+
* @param {HTMLElement} props.el - The target element to create chart.
|
|
9
|
+
* @param {Object} props.data - Data for making RadialBar Chart.
|
|
10
|
+
* @param {Array<string>} [props.data.categories] - Categories.
|
|
11
|
+
* @param {Array<Object>} props.data.series - Series data.
|
|
12
|
+
* @param {string} props.data.series.name - Series name.
|
|
13
|
+
* @param {number} props.data.series.data - Series data.
|
|
14
|
+
* @param {Object} [props.options] - Options for making RadialBar Chart.
|
|
15
|
+
* @param {Object} [props.options.chart]
|
|
16
|
+
* @param {string|Object} [props.options.chart.title] - Chart title text or options.
|
|
17
|
+
* @param {string} [props.options.chart.title.text] - Chart title text.
|
|
18
|
+
* @param {number} [props.options.chart.title.offsetX] - Offset value to move title horizontally.
|
|
19
|
+
* @param {number} [props.options.chart.title.offsetY] - Offset value to move title vertically.
|
|
20
|
+
* @param {string} [props.options.chart.title.align] - Chart text align. 'left', 'right', 'center' is available.
|
|
21
|
+
* @param {boolean|Object} [props.options.chart.animation] - Whether to use animation and duration when rendering the initial chart.
|
|
22
|
+
* @param {number|string} [props.options.chart.width] - Chart width. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the width of the parent container is followed.
|
|
23
|
+
* @param {number|string} [props.options.chart.height] - Chart height. 'auto' or if not write, the width of the parent container is followed. 'auto' or if not created, the height of the parent container is followed.
|
|
24
|
+
* @param {Object} [props.options.series]
|
|
25
|
+
* @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
|
|
26
|
+
* @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.
|
|
27
|
+
* @param {Object} [props.options.series.dataLabels] - Set the visibility, location, and formatting of dataLabel. For specific information, refer to the {@link https://github.com/nhn/tui.chart|DataLabels guide} on github.
|
|
28
|
+
* @param {Array<number>|Array<string>} [props.options.series.radiusRange] - Specifies the radius of the circle drawn. It is specified by entering a number or percent string value in start and end.
|
|
29
|
+
* @param {Array<number>} [props.options.series.angleRange] - The range of angles to which the circle will be drawn. It is specified by putting number in start and end.
|
|
30
|
+
* @param {boolean} [props.options.series.clockwise] - Whether it will be drawn clockwise.
|
|
31
|
+
* @param {Object} [props.options.circularAxis]
|
|
32
|
+
* @param {Object} [props.options.circularAxis.tick] - Option to adjust tick interval.
|
|
33
|
+
* @param {Object} [props.options.circularAxis.label] - Option to adjust label interval.
|
|
34
|
+
* @param {Object} [props.options.circularAxis.scale] - Option to adjust axis minimum, maximum, step size.
|
|
35
|
+
* @param {Object} [props.options.verticalAxis]
|
|
36
|
+
* @param {Object} [props.options.verticalAxis.tick] - Option to adjust tick interval.
|
|
37
|
+
* @param {Object} [props.options.verticalAxis.label] - Option to adjust label interval.
|
|
38
|
+
* @param {Object} [props.options.legend]
|
|
39
|
+
* @param {string} [props.options.legend.align] - Legend align. 'top', 'bottom', 'right', 'left' is available.
|
|
40
|
+
* @param {string} [props.options.legend.showCheckbox] - Whether to show checkbox.
|
|
41
|
+
* @param {boolean} [props.options.legend.visible] - Whether to show legend.
|
|
42
|
+
* @param {number} [props.options.legend.width] - Width of legend.
|
|
43
|
+
* @param {Object} [props.options.legend.item] - `width` and `overflow` options of the legend item. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Legend guide} on github.
|
|
44
|
+
* @param {Object} [props.options.exportMenu]
|
|
45
|
+
* @param {boolean} [props.options.exportMenu.visible] - Whether to show export menu.
|
|
46
|
+
* @param {string} [props.options.exportMenu.filename] - File name applied when downloading.
|
|
47
|
+
* @param {Object} [props.options.tooltip]
|
|
48
|
+
* @param {number} [props.options.tooltip.offsetX] - Offset value to move title horizontally.
|
|
49
|
+
* @param {number} [props.options.tooltip.offsetY] - Offset value to move title vertically.
|
|
50
|
+
* @param {Function} [props.options.tooltip.formatter] - Function to format data value.
|
|
51
|
+
* @param {Function} [props.options.tooltip.template] - Function to create custom template. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Tooltip guide} on github.
|
|
52
|
+
* @param {Object} [props.options.responsive] - Rules for changing chart options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|Responsive guide} on github.
|
|
53
|
+
* @param {boolean|Object} [props.options.responsive.animation] - Animation duration when the chart is modified.
|
|
54
|
+
* @param {Array<Object>} [props.options.responsive.rules] - Rules for the Chart to Respond.
|
|
55
|
+
* @param {Object} [props.options.lang] - Options for changing the text displayed on the chart or i18n languages.
|
|
56
|
+
* @param {Object} [props.options.lang.noData] - No Data Layer Text.
|
|
57
|
+
* @param {Object} [props.options.theme] - Chart theme options. For specific information, refer to the {@link https://github.com/nhn/tui.chart|RadialBar Chart guide} on github.
|
|
58
|
+
* @param {Object} [props.options.theme.chart] - Chart font theme.
|
|
59
|
+
* @param {Object} [props.options.theme.noData] - No Data Layer Text theme.
|
|
60
|
+
* @param {Object} [props.options.theme.series] - Series theme.
|
|
61
|
+
* @param {Object} [props.options.theme.title] - Title theme.
|
|
62
|
+
* @param {Object} [props.options.theme.circularAxis] - Circular Axis theme.
|
|
63
|
+
* @param {Object} [props.options.theme.verticalAxis] - Vertical Axis theme.
|
|
64
|
+
* @param {Object} [props.options.theme.legend] - Legend theme.
|
|
65
|
+
* @param {Object} [props.options.theme.tooltip] - Tooltip theme.
|
|
66
|
+
* @param {Object} [props.options.theme.exportMenu] - ExportMenu theme.
|
|
67
|
+
* @extends Chart
|
|
68
|
+
*/
|
|
69
|
+
export default class RadialBarChart extends Chart<RadialBarChartOptions> {
|
|
70
|
+
constructor({ el, options, data }: RadialBarChartProps);
|
|
71
|
+
initialize(): void;
|
|
72
|
+
/**
|
|
73
|
+
* Add series.
|
|
74
|
+
* @param {Object} data - Data to be added.
|
|
75
|
+
* @param {string} data.name - Series name.
|
|
76
|
+
* @param {Array<number>} data.data - Array of data to be added.
|
|
77
|
+
* @api
|
|
78
|
+
* @example
|
|
79
|
+
* chart.addSeries({
|
|
80
|
+
* name: 'newSeries',
|
|
81
|
+
* data: [10, 20, 30, 40],
|
|
82
|
+
* });
|
|
83
|
+
*/
|
|
84
|
+
addSeries(data: RadialBarSeriesType): void;
|
|
85
|
+
/**
|
|
86
|
+
* Convert the chart data to new data.
|
|
87
|
+
* @param {Object} data - Data to be set.
|
|
88
|
+
* @api
|
|
89
|
+
* @example
|
|
90
|
+
* chart.setData({
|
|
91
|
+
* categories: ['1', '2', '3'],
|
|
92
|
+
* series: [
|
|
93
|
+
* {
|
|
94
|
+
* name: 'new series',
|
|
95
|
+
* data: [1, 2, 3],
|
|
96
|
+
* },
|
|
97
|
+
* {
|
|
98
|
+
* name: 'new series2',
|
|
99
|
+
* data: [4, 5, 6],
|
|
100
|
+
* }
|
|
101
|
+
* ]
|
|
102
|
+
* });
|
|
103
|
+
*/
|
|
104
|
+
setData(data: RadialBarSeriesData): void;
|
|
105
|
+
/**
|
|
106
|
+
* Hide series data label.
|
|
107
|
+
* @api
|
|
108
|
+
* @example
|
|
109
|
+
* chart.hideSeriesDataLabel();
|
|
110
|
+
*/
|
|
111
|
+
hideSeriesDataLabel(): void;
|
|
112
|
+
/**
|
|
113
|
+
* Show series data label.
|
|
114
|
+
* @api
|
|
115
|
+
* @example
|
|
116
|
+
* chart.showSeriesDataLabel();
|
|
117
|
+
*/
|
|
118
|
+
showSeriesDataLabel(): void;
|
|
119
|
+
/**
|
|
120
|
+
* Convert the chart options to new options.
|
|
121
|
+
* @param {Object} options - Chart options.
|
|
122
|
+
* @api
|
|
123
|
+
* @example
|
|
124
|
+
* chart.setOptions({
|
|
125
|
+
* chart: {
|
|
126
|
+
* width: 500,
|
|
127
|
+
* height: 500,
|
|
128
|
+
* title: 'Olympic Medals',
|
|
129
|
+
* },
|
|
130
|
+
* series: {
|
|
131
|
+
* selectable: true
|
|
132
|
+
* }
|
|
133
|
+
* });
|
|
134
|
+
*/
|
|
135
|
+
setOptions(options: RadialBarChartOptions): void;
|
|
136
|
+
/**
|
|
137
|
+
* Update chart options.
|
|
138
|
+
* @param {Object} options - Chart options.
|
|
139
|
+
* @api
|
|
140
|
+
* @example
|
|
141
|
+
* chart.updateOptions({
|
|
142
|
+
* chart: {
|
|
143
|
+
* title: 'Olympic Medals',
|
|
144
|
+
* },
|
|
145
|
+
* series: {
|
|
146
|
+
* eventDetectType: 'grouped'
|
|
147
|
+
* }
|
|
148
|
+
* });
|
|
149
|
+
*/
|
|
150
|
+
updateOptions(options: RadialBarChartOptions): void;
|
|
151
|
+
/**
|
|
152
|
+
* Show tooltip.
|
|
153
|
+
* @param {Object} seriesInfo - Information of the series for the tooltip to be displayed.
|
|
154
|
+
* @param {number} seriesInfo.index - Index of data within series. If 'series.eventDetectType' is "grouped", only index is needed.
|
|
155
|
+
* @param {number} [seriesInfo.seriesIndex] - Index of series
|
|
156
|
+
* @api
|
|
157
|
+
* @example
|
|
158
|
+
* // eventDetectType is 'grouped'
|
|
159
|
+
* chart.showTooltip({index: 1});
|
|
160
|
+
*
|
|
161
|
+
* // eventDetectType is 'point'
|
|
162
|
+
* chart.showTooltip({index: 1, seriesIndex: 2});
|
|
163
|
+
*/
|
|
164
|
+
showTooltip(seriesInfo: SelectSeriesInfo): void;
|
|
165
|
+
/**
|
|
166
|
+
* Hide tooltip.
|
|
167
|
+
* @api
|
|
168
|
+
* @example
|
|
169
|
+
* chart.hideTooltip();
|
|
170
|
+
*/
|
|
171
|
+
hideTooltip(): void;
|
|
172
|
+
}
|