Index: arms/html/dashboard/content-container.html
===================================================================
diff -u -r5cd1497e26973be15fe1d8eb216be1cbb19cbe0e -rb3c1385e85f9b8b735eadcb6df7e117b02b66425
--- arms/html/dashboard/content-container.html (.../content-container.html) (revision 5cd1497e26973be15fe1d8eb216be1cbb19cbe0e)
+++ arms/html/dashboard/content-container.html (.../content-container.html) (revision b3c1385e85f9b8b735eadcb6df7e117b02b66425)
@@ -563,26 +563,24 @@
Index: arms/js/dashboard.js
===================================================================
diff -u -r5cd1497e26973be15fe1d8eb216be1cbb19cbe0e -rb3c1385e85f9b8b735eadcb6df7e117b02b66425
--- arms/js/dashboard.js (.../dashboard.js) (revision 5cd1497e26973be15fe1d8eb216be1cbb19cbe0e)
+++ arms/js/dashboard.js (.../dashboard.js) (revision b3c1385e85f9b8b735eadcb6df7e117b02b66425)
@@ -22,16 +22,19 @@
"../reference/light-blue/lib/jquery.fileupload.js",
"../reference/light-blue/lib/jquery.fileupload-fp.js",
"../reference/light-blue/lib/jquery.fileupload-ui.js",
- //"../reference/jquery-plugins/d3-7.8.2/dist/d3.js",
- "../reference/jquery-plugins/d3-v4.13.0/d3.v4.min.js", //d3 변경
+ //d3 변경
+ "../reference/jquery-plugins/d3-v4.13.0/d3.v4.min.js",
"../reference/c3/c3.min.css",
"../reference/c3/c3-custom.css",
"../reference/c3/c3.min.js",
"./js/common/colorPalette.js",
- "./mock/versionGauge.json",
+ //timeline
"../reference/jquery-plugins/info-chart-v1/js/D.js",
"./js/dashboard/chart/timeline_custom.js",
- "./js/dashboard/chart/infographic_custom.css"
+ "./js/dashboard/chart/infographic_custom.css",
+ //echarts
+ "../reference/jquery-plugins/echarts-5.4.3/dist/echarts.min.js",
+ "./js/dashboard/chart/barChartOnPolar.js"
],
["../reference/jquery-plugins/select2-4.0.2/dist/css/select2_lightblue4.css",
@@ -191,6 +194,8 @@
d3.json("./mock/productToMan.json", function (data) {
drawProductToManSankeyChart(data);
});
+
+ drawBarOnPolar("polar_bar", categories_mock, data_mock);
});
} // end makePdServiceSelectBox()
@@ -1249,4 +1254,4 @@
startDate: '2013.05.01',
endDate: '2019.12.30',
},
-];
\ No newline at end of file
+];
Index: arms/js/dashboard/chart/barChartOnPolar.js
===================================================================
diff -u
--- arms/js/dashboard/chart/barChartOnPolar.js (revision 0)
+++ arms/js/dashboard/chart/barChartOnPolar.js (revision b3c1385e85f9b8b735eadcb6df7e117b02b66425)
@@ -0,0 +1,120 @@
+const categories_mock = ['강남', '송파', '서초', '관악', '동작', '강서', '금천', '강동', '광진', '중랑',
+ '노원', '도봉', '강북', '성북', '동대문', '용산', '마포', '구로', '종로'];
+const data_mock = [
+ [5000, 10000, 6785.71],
+ [4000, 10000, 6825],
+ [3000, 6500, 4463.33],
+ [2500, 5600, 3793.83],
+ [2000, 4000, 3060],
+ [2000, 4000, 3222.33],
+ [2500, 4000, 3133.33],
+ [1800, 4000, 3100],
+ [2000, 3500, 2750],
+ [2000, 3000, 2500],
+ [1800, 3000, 2433.33],
+ [2000, 2700, 2375],
+ [1500, 2800, 2150],
+ [1500, 2300, 2100],
+ [1600, 3500, 2057.14],
+ [1500, 2600, 2037.5],
+ [1500, 2417.54, 1905.85],
+ [1500, 2000, 1775],
+ [1500, 1800, 1650]
+];
+
+function drawBarOnPolar(target, categories, data) {
+ var chartDom = document.getElementById(target);
+ var myChart = echarts.init(chartDom);
+ // cities와 data
+ var _categories = (categories === undefined ? ["데이터 없음"] : categories);
+ var _data = (data === undefined ? [0,0,10] : data);
+
+ const barHeight = 50;
+ var option = {
+ title: {
+ text: 'Resources?',
+ subtext: 'Data from http://www.a-rms.net/313devgrp/arms/'
+ },
+ legend: {
+ show: true,
+ top: 'bottom',
+ data: ['Range', 'Average']
+ },
+ grid: {
+ top: 100
+ },
+ angleAxis: {
+ type: 'category',
+ data: categories
+ },
+ tooltip: {
+ show: true,
+ formatter: function (params) {
+ const id = params.dataIndex;
+ return (
+ categories[id] +
+ '
Lowest：' +
+ data[id][0] +
+ '
Highest：' +
+ data[id][1] +
+ '
Average：' +
+ data[id][2]
+ );
+ }
+ },
+ radiusAxis: {},
+ polar: {},
+ series: [
+ {
+ type: 'bar',
+ itemStyle: {
+ color: 'transparent'
+ },
+ data: data.map(function (d) {
+ return d[0];
+ }),
+ coordinateSystem: 'polar',
+ stack: 'Min Max',
+ silent: true
+ },
+ {
+ type: 'bar',
+ data: data.map(function (d) {
+ return d[1] - d[0];
+ }),
+ coordinateSystem: 'polar',
+ name: 'Range',
+ stack: 'Min Max'
+ },
+ {
+ type: 'bar',
+ itemStyle: {
+ color: 'transparent'
+ },
+ data: data.map(function (d) {
+ return d[2] - barHeight;
+ }),
+ coordinateSystem: 'polar',
+ stack: 'Average',
+ silent: true,
+ z: 10
+ },
+ {
+ type: 'bar',
+ data: data.map(function (d) {
+ return barHeight * 2;
+ }),
+ coordinateSystem: 'polar',
+ name: 'Average',
+ stack: 'Average',
+ barGap: '-100%',
+ z: 10
+ }
+ ]
+ };
+ myChart.setOption(option);
+
+ window.onresize = function() {
+ myChart.resize();
+ };
+}
\ No newline at end of file