bar chart add function

index.html

@@ -361,9 +361,10 @@
             </div>
         </form>
         <form class="ml-md-3 mr-md-3 my-2 chartSetting ">
-            <p class="font-weight-bold">標題位置:</p>
+            <p class="font-weight-bold">標題:</p>
             <input type="text" id="title_data" class="form-control bg-light small mb-3" placeholder="請輸入標題..."
                 aria-label="Search" aria-describedby="basic-addon2">
+            <p class="font-weight-bold">標題位置:</p>
             <div class="form-check form-check-inline">
                 <input class="form-check-input" value="0" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                     value="option1" checked>
@@ -438,6 +439,31 @@
             </form>
         </div>
 
+        <div id="barChartSetting">
+            <form class="ml-md-3 mr-md-3 my-2 chartSetting">
+                <p class="font-weight-bold">橫軸字體大小:</p>
+                <label class="d-none" for="XfontSize">字體大小:</label>
+                <input type="number" value="14" step="1" class="form-control" id="XfontSizeBar" />
+            </form>
+            <form class="ml-md-3 mr-md-3 my-2 chartSetting">
+                <p class="font-weight-bold">縱軸字體大小:</p>
+                <label class="d-none" for="XfontSize">字體大小:</label>
+                <input type="number" value="14" step="1" class="form-control" id="YfontSizeBar" />
+            </form>
+            <form class="ml-md-3 mr-md-3 my-2 chartSetting">
+                <div id="borderSetting" class="borderWidth d-flex">
+                    <div>
+                        <p style="margin-bottom: 10px;" class="font-weight-bold">柱狀顏色:</p>
+                        <label for="exampleColorInput" class="form-label d-none">線條顏色</label>
+                        <input type="color" class="form-control form-control-color" id="borderColorInputBar"
+                            value="#288D97" title="Choose your color">
+                    </div>
+                </div>
+                <div>
+                </div>
+            </form>
+        </div>
+
         <form class="ml-md-3 mr-md-3 my-2 chartSetting">
             <p class="font-weight-bold">背景圖片:</p>
             <div class="d-flex">

js/demo/text-to-chart.js

@@ -23,6 +23,7 @@ var chartType = 'line';
 var unit = '';
 var myChart = null;
 var chartColor = '#912B2B';
+var chartColorBar = '#'
 var displayXaxes = true;
 var ctx;
 
@@ -415,12 +416,51 @@ function generatePieChart(dataArray) {
     downloadButton.style.display = "inline-block";
 }
 
+// var colorEven='#288D97';
+
+// var colorOdd='#427D7E'
+
+function adjustColorBrightness(color, amount) {
+    let usePound = false;
+
+    if (color[0] == "#") {
+        color = color.slice(1);
+        usePound = true;
+    }
+
+    let num = parseInt(color, 16);
+
+    let r = (num >> 16) + amount;
+    let g = ((num >> 8) & 0x00FF) + amount;
+    let b = (num & 0x0000FF) + amount;
+
+    if (r > 255) r = 255;
+    else if (r < 0) r = 0;
+
+    if (g > 255) g = 255;
+    else if (g < 0) g = 0;
+
+    if (b > 255) b = 255;
+    else if (b < 0) b = 0;
+
+    return (usePound ? "#" : "") + (r << 16 | g << 8 | b).toString(16).padStart(6, '0');
+}
 // 柱狀圖
 function generateBarChart(key, dataArray) {
     $('#chartdiv').show();
     // var colorEven = document.getElementById('colorEven').value;
     // var colorOdd = document.getElementById('colorOdd').value;
 
+    var baseColor = document.getElementById('borderColorInputBar').value;
+
+    var categoryAxisFzValue = document.getElementById('XfontSizeBar').value;
+
+    var valueAxisFzValue = document.getElementById('YfontSizeBar').value;
+
+    var colorEven = am4core.color(baseColor);
+
+    var colorOdd = adjustColorBrightness(baseColor, -20);
+
     chartDiv.style.fontFamily = "Arial, sans-serif";
 
     chartDiv.style.fontWeight = "900";
@@ -438,7 +478,7 @@ function generateBarChart(key, dataArray) {
     // Create chart instance
     var chart = am4core.create("chartdiv", am4charts.XYChart3D);
 
-    console.log(dataArray);
+    console.log('判斷資料', dataArray);
 
     chart.data = dataArray;
 
@@ -460,8 +500,17 @@ function generateBarChart(key, dataArray) {
     // label 換行
     let label = categoryAxis.renderer.labels.template;
     label.wrap = true;
-    label.maxWidth = 100;
+    if (dataArray.length > 5) {
+        console.log('資料長度5')
+        label.maxWidth = 50;
+    } else {
+        label.maxWidth = 100;
+        console.log('資料長度<5')
 
+    }
+
+    // x軸字體大小
+    categoryAxis.renderer.labels.template.fontSize = categoryAxisFzValue;
 
     categoryAxis.renderer.cellEndLocation = 0.5; // 減少值可以增加間距
 
@@ -469,7 +518,8 @@ function generateBarChart(key, dataArray) {
     valueAxis.title.text = labelDependent; // Y軸
     valueAxis.title.fontWeight = "bold";
 
-
+    // y軸字體大小
+    valueAxis.renderer.labels.template.fontSize = valueAxisFzValue;
 
     // Create series
     var series = chart.series.push(new am4charts.ColumnSeries3D());
@@ -490,7 +540,7 @@ function generateBarChart(key, dataArray) {
 
     // 設置基數和偶數顏色
     columnTemplate.adapter.add("fill", function (fill, target) {
-        return target.dataItem.index % 2 === 0 ? am4core.color("#288D97") : am4core.color("#427D7E");
+        return target.dataItem.index % 2 === 0 ? am4core.color(colorEven) : am4core.color(colorOdd);
     });
 
     columnTemplate.adapter.add("stroke", function (stroke, target) {
@@ -583,8 +633,6 @@ downloadButton.addEventListener('click', function () {
             // link.click();
 
 
-
-
             // 創建一個&lt;a&gt;元素
             const link = document.createElement('a');
             // 將 Canvas 轉換為 Data URL
@@ -1183,7 +1231,7 @@ unitInput.addEventListener('input', function () {
 
 // ==========================
 
-// y軸字體大小
+// y軸字體大小-折線圖
 // ==========================
 
 
@@ -1202,7 +1250,7 @@ YfontSize.addEventListener('input', function () {
 
 
 
-// x軸字體大小
+// x軸字體大小-折線圖
 // ==========================
 var XfontSize = document.getElementById('XfontSize');
 
@@ -1217,6 +1265,46 @@ XfontSize.addEventListener('input', function () {
 });
 // ==========================
 
+
+// x軸字體大小-柱狀圖
+// ==========================
+var XfontSizeBar = document.getElementById('XfontSizeBar');
+
+XfontSizeBar.addEventListener('input', function () {
+    extractAndGenerateChart(dataArray);
+
+});
+// ==========================
+
+
+// y軸字體大小-柱狀圖
+// ==========================
+
+
+var YfontSizeBar = document.getElementById('YfontSizeBar');
+YfontSizeBar.addEventListener('input', function () {
+    extractAndGenerateChart(dataArray);
+
+});
+
+// ==========================
+
+// 線條顏色-柱狀圖
+// =========================
+
+
+const colorInputBar = document.getElementById('borderColorInputBar');
+
+// 添加事件监听器，当颜色选择发生变化时触发
+colorInputBar.addEventListener('input', function () {
+
+    extractAndGenerateChart(dataArray);
+
+});
+
+// =========================
+
+
 // 線條粗細
 // =========================
 var rangeInput = document.getElementById('borderWidthRange');
@@ -1247,7 +1335,7 @@ rangeInput.addEventListener('input', function () {
 
 // =========================
 
-// 線條顏色
+// 線條顏色-折線圖
 // =========================
 
 
@@ -1263,6 +1351,7 @@ colorInput.addEventListener('input', function () {
         myChart.destroy();
     }
 
+
     console.log(chartColor);
     createChart(chartType, data, labels);
 });
@@ -1270,6 +1359,9 @@ colorInput.addEventListener('input', function () {
 // =========================
 
 
+
+
+
 // 模板樣式
 // =========================
 // JavaScript
@@ -1372,7 +1464,7 @@ function get_data(input_text_value) {
     inputField.value = "";
     apiLoading();
     var existingTable = chartJsBox.querySelector('table');
-
+    downloadButton.style.display = "none";
     if (chartDiv.childElementCount != 0) {
         data = [];
         labels = [];
@@ -1508,7 +1600,7 @@ document.addEventListener('visibilitychange', function () {
 window.addEventListener('resize', resizeChart);
 
 
-var seeting_button = document.getElementById('chart_seeting_button');
+var setting_button = document.getElementById('chart_seeting_button');
 
 var closeButton = document.getElementById('style_setting_close');
 
@@ -1522,6 +1614,8 @@ var closeButton_table = document.getElementById('style_setting_close_table');
 
 var lineChartSetting = document.getElementById('lineChartSetting');
 
+var barChartSetting = document.getElementById('barChartSetting');
+
 var table_setting = document.getElementById('table_setting');
 
 var chart_category = document.getElementById('chart_category');
@@ -1531,7 +1625,7 @@ var chart_category = document.getElementById('chart_category');
 
 
 
-seeting_button.addEventListener('click', () => {
+setting_button.addEventListener('click', () => {
 
     console.log('setting_button')
     if (myChart === null && !chartJsBox.querySelector('table') && chartDiv.childElementCount === 0) {
@@ -1542,6 +1636,7 @@ seeting_button.addEventListener('click', () => {
         console.log('表格');
         sidebar.classList.toggle('show');
         sidebar.classList.toggle('hidden');
+        barChartSetting.style.display = 'none';
         lineChartSetting.style.display = 'none';
         table_setting.style.display = 'block';
         chart_category.style.display = 'none';
@@ -1550,6 +1645,7 @@ seeting_button.addEventListener('click', () => {
         console.log('柱狀圖')
         sidebar.classList.toggle('show');
         sidebar.classList.toggle('hidden');
+        barChartSetting.style.display = 'block';
         lineChartSetting.style.display = 'none';
         table_setting.style.display = 'none';
 
@@ -1558,6 +1654,7 @@ seeting_button.addEventListener('click', () => {
         console.log('快捷功能圓餅圖')
         sidebar.classList.toggle('show');
         sidebar.classList.toggle('hidden');
+        barChartSetting.style.display = 'none';
         lineChartSetting.style.display = 'none';
         table_setting.style.display = 'none';
         chart_category.style.display = 'none';
@@ -1566,6 +1663,7 @@ seeting_button.addEventListener('click', () => {
         sidebar.classList.toggle('show');
         sidebar.classList.toggle('hidden');
         table_setting.style.display = 'none';
+        barChartSetting.style.display = 'none';
         lineChartSetting.style.display = 'block';
     }