|
|
@@ -36,9 +36,15 @@ var inputField = document.getElementById("keyword_data");
|
|
|
|
|
|
var inputField_compare = document.getElementById("keyword_data_compare");
|
|
|
|
|
|
+var compare_box = document.getElementById("compare");
|
|
|
+
|
|
|
+
|
|
|
|
|
|
var sendButton = document.getElementById("send_data");
|
|
|
|
|
|
+var send_data_compare = document.getElementById("data_compare");
|
|
|
+
|
|
|
+
|
|
|
var canvasPng = document.getElementById("textToChart");
|
|
|
|
|
|
var img_box = document.getElementById("img_box");
|
|
|
@@ -64,6 +70,9 @@ var YfontSizeValue = 18;
|
|
|
|
|
|
var TitlefontSizeValue = 32;
|
|
|
|
|
|
+var pieFontSize = 14;
|
|
|
+var PieMaxWidth = 100;
|
|
|
+
|
|
|
|
|
|
var chart_bgimg_url = "url(./img/bg06.webp)";
|
|
|
|
|
|
@@ -71,11 +80,15 @@ var vocab = [];
|
|
|
|
|
|
var chartDiv = document.getElementById('chartdiv');
|
|
|
|
|
|
+var dataFirstValue;
|
|
|
+var dataLastValue;
|
|
|
+
|
|
|
let cancelToken;
|
|
|
let source;
|
|
|
|
|
|
$('#chartdiv').hide();
|
|
|
|
|
|
+var clickExample = document.getElementById('example_box')
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
|
axios.get("https://cmm.ai:8080/vocab")
|
|
|
@@ -141,7 +154,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
// suggestions.style.display = 'none'; // 隱藏建議容器
|
|
|
|
|
|
// });
|
|
|
- console.log('queryTerms', queryTerms);
|
|
|
+ // console.log('queryTerms', queryTerms);
|
|
|
|
|
|
// console.log('filteredVocab', filteredVocab);
|
|
|
|
|
|
@@ -243,7 +256,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|
|
// suggestions.style.display = 'none'; // 隱藏建議容器
|
|
|
|
|
|
// });
|
|
|
- console.log('queryTerms', queryTerms);
|
|
|
+ // console.log('queryTerms', queryTerms);
|
|
|
|
|
|
// console.log('filteredVocab', filteredVocab);
|
|
|
|
|
|
@@ -318,6 +331,7 @@ function sendButtonClickHandler() {
|
|
|
// inputField.value = "";
|
|
|
console.log(inputField.value);
|
|
|
var input_text_value = inputField.value;
|
|
|
+ compare_box.style.display = "none";
|
|
|
$('#chartdiv').hide();
|
|
|
sidebar.classList.remove('show');
|
|
|
sidebar.classList.add('hidden');
|
|
|
@@ -329,6 +343,135 @@ sendButton.addEventListener("click", function () {
|
|
|
|
|
|
sendButtonClickHandler();
|
|
|
inputField.value = ''
|
|
|
+ chartTypeBtn.style.display = "none";
|
|
|
+});
|
|
|
+
|
|
|
+let labels2 = [];
|
|
|
+let data2 = [];
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+send_data_compare.addEventListener("click", function () {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ console.log('比較', inputField_compare.value);
|
|
|
+ const stockName = inputField_compare.value;
|
|
|
+ axios
|
|
|
+ .get(`https://cmm.ai:8080/get_data_from_date?start_date=${dataFirstValue}&end_date=${dataLastValue}&stock_name=${inputField_compare.value}`)
|
|
|
+ .then((response) => {
|
|
|
+ console.log(response);
|
|
|
+ var compare_data = response.data.data;
|
|
|
+ labels2 = []; // Clear previous labels
|
|
|
+ data2 = []; // Clear previous data
|
|
|
+
|
|
|
+ // console.log('比較送出後', chartType)
|
|
|
+
|
|
|
+ if (chartType === 'line') {
|
|
|
+ const colors = [
|
|
|
+ 'rgba(130, 163, 63, 1)',
|
|
|
+ 'rgba(47, 72, 123, 1)',
|
|
|
+ '#df8c49',
|
|
|
+ '#72598f',
|
|
|
+ '#489fb6',
|
|
|
+ '#99b0d5'
|
|
|
+ ];
|
|
|
+
|
|
|
+ let colorIndex = 0;
|
|
|
+
|
|
|
+ for (var i = 0; i < compare_data.length; i++) {
|
|
|
+ var item = compare_data[i];
|
|
|
+ // 遍历当前项的属性
|
|
|
+ for (var key in item) {
|
|
|
+ // 如果属性名不在 labels 数组中，并且属性值不是对象，则将属性名添加到 labels 数组中
|
|
|
+
|
|
|
+ if (typeof item[key] === 'string') {
|
|
|
+ labels2.push(item[key]);
|
|
|
+ }
|
|
|
+ // 如果属性值是数值类型，则将其添加到 data 数组中
|
|
|
+ if (typeof item[key] === 'number') {
|
|
|
+ data2.push(item[key]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function getRandomColor() {
|
|
|
+ const randomIndex = Math.floor(Math.random() * colors.length);
|
|
|
+ const selectedColor = colors[randomIndex];
|
|
|
+ colors.splice(randomIndex, 1); // 从数组中移除已选颜色
|
|
|
+ return selectedColor;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const normalize = (prices) => {
|
|
|
+ const initialPrice = prices[0];
|
|
|
+ return prices.map(price => (price - initialPrice) / initialPrice * 100);
|
|
|
+ };
|
|
|
+
|
|
|
+ const stock2Normalized = normalize(data2);
|
|
|
+
|
|
|
+ const stock1Normalized = normalize(data);
|
|
|
+ const color = getRandomColor();
|
|
|
+
|
|
|
+ const newDataset = {
|
|
|
+ label: stockName,
|
|
|
+ backgroundColor: colors,
|
|
|
+ pointRadius: 0,
|
|
|
+ pointHoverRadius: 0,
|
|
|
+ borderColor: colors,
|
|
|
+ data: stock2Normalized,
|
|
|
+ fill: false
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ colorIndex = (colorIndex + 1) % colors.length;
|
|
|
+
|
|
|
+ myChart.data.datasets.push(newDataset);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ myChart.data.datasets[0].data = stock1Normalized;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ console.log('多筆資料', myChart.data.datasets);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // console.log('比較', myChart.options.plugins.legend);
|
|
|
+
|
|
|
+ myChart.options.plugins.legend.display = true;
|
|
|
+
|
|
|
+ // myChart.defaults.global.legend = {
|
|
|
+ // display: true,
|
|
|
+ // position: 'top', // 默认图例位置为顶部
|
|
|
+ // labels: {
|
|
|
+ // fontColor: 'rgb(255, 99, 132)', // 默认图例标签颜色
|
|
|
+ // fontSize: 14 // 默认图例标签字体大小
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ myChart.update();
|
|
|
+
|
|
|
+ inputField_compare.value = '';
|
|
|
+ unitInput.value = '%';
|
|
|
+ unit_value.textContent = '單位:' + '%'
|
|
|
+ } else if (chartType === 'bar') {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch((error) =>
|
|
|
+ console.log(error)
|
|
|
+ );
|
|
|
+
|
|
|
});
|
|
|
|
|
|
// sendButton.addEventListener("click", function () {
|
|
|
@@ -444,14 +587,33 @@ function generateChart(dataArray) {
|
|
|
|
|
|
if (typeof item[key] === 'string') {
|
|
|
labels.push(item[key]);
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ if (key === 'x') {
|
|
|
+ labels.push(String(item[key]));
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
- // 如果属性值是数值类型，则将其添加到 data 数组中
|
|
|
- if (typeof item[key] === 'number') {
|
|
|
+
|
|
|
+ if (key === 'y') {
|
|
|
data.push(item[key]);
|
|
|
}
|
|
|
+ // 如果属性值是数值类型，则将其添加到 data 数组中
|
|
|
+ // if (typeof item[key] === 'number') {
|
|
|
+ // data.push(item[key]);
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
console.log(data);
|
|
|
+ dataFirstValue = labels[0];
|
|
|
+ dataLastValue = labels[labels.length - 1]
|
|
|
+
|
|
|
+ console.log('dataFirstValue', dataFirstValue);
|
|
|
+
|
|
|
+ console.log('dataLastValue', dataLastValue);
|
|
|
+
|
|
|
+
|
|
|
if (myChart) {
|
|
|
console.log('已存在')
|
|
|
myChart.destroy();
|
|
|
@@ -498,7 +660,9 @@ function extractAndGenerateChart(dataArray) {
|
|
|
}
|
|
|
|
|
|
// 圓餅圖
|
|
|
-function generatePieChart(dataArray) {
|
|
|
+function generatePieChart(dataArray, pieFontSize, PieMaxWidth) {
|
|
|
+ compare_box.style.display = "none";
|
|
|
+
|
|
|
$('#chartdiv').show();
|
|
|
bgImgelement.style.backgroundImage = chart_bgimg_url;
|
|
|
// chartDiv.style.width = "100%"
|
|
|
@@ -522,20 +686,34 @@ function generatePieChart(dataArray) {
|
|
|
|
|
|
// Configure labels
|
|
|
pieSeries.labels.template.wrap = true;
|
|
|
- pieSeries.labels.template.maxWidth = 100;
|
|
|
+ console.log('PieMaxWidth', PieMaxWidth);
|
|
|
+ pieSeries.labels.template.maxWidth = PieMaxWidth;
|
|
|
pieSeries.labels.template.truncate = false;
|
|
|
pieSeries.labels.template.fontSize = 14;
|
|
|
|
|
|
+ if (typeof PieMaxWidth === 'string') {
|
|
|
+ console.log('The variable is a string.');
|
|
|
+ } else {
|
|
|
+ console.log('The variable is a number.');
|
|
|
+ }
|
|
|
+
|
|
|
// Configure label text to wrap and show percentages
|
|
|
+ // pieSeries.labels.template.adapter.add("textOutput", function (text, target) {
|
|
|
+ // if (target.dataItem && target.dataItem.values.value.percent) {
|
|
|
+ // return "[font-size: 14px]" + target.dataItem.category + ": " + target.dataItem.values.value.percent.toFixed(1) + "%";
|
|
|
+ // }
|
|
|
+ // return text;
|
|
|
+ // });
|
|
|
+
|
|
|
+
|
|
|
pieSeries.labels.template.adapter.add("textOutput", function (text, target) {
|
|
|
if (target.dataItem && target.dataItem.values.value.percent) {
|
|
|
- return "[font-size: 14px]" + target.dataItem.category + ": " + target.dataItem.values.value.percent.toFixed(1) + "%";
|
|
|
+ return "[font-size: " + pieFontSize + "px]" + target.dataItem.category + ": " + target.dataItem.values.value.percent.toFixed(1) + "%";
|
|
|
}
|
|
|
return text;
|
|
|
});
|
|
|
|
|
|
|
|
|
-
|
|
|
pieSeries.colors.list = [
|
|
|
am4core.color('rgb(171, 51, 49)'),
|
|
|
am4core.color('rgb(34, 83, 149)'),
|
|
|
@@ -563,6 +741,10 @@ function generatePieChart(dataArray) {
|
|
|
|
|
|
// console.log('調位置')
|
|
|
downloadButton.style.display = "inline-block";
|
|
|
+ chartTypeBtn.style.display = "inline-block";
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// var colorEven='#288D97';
|
|
|
@@ -596,6 +778,12 @@ function adjustColorBrightness(color, amount) {
|
|
|
}
|
|
|
// 柱狀圖
|
|
|
function generateBarChart(key, dataArray) {
|
|
|
+
|
|
|
+ console.log('generateBarChart', dataArray)
|
|
|
+ chartTypeBtn.style.display = "inline-block";
|
|
|
+ compare_box.style.display = "none";
|
|
|
+
|
|
|
+
|
|
|
$('#chartdiv').show();
|
|
|
// var colorEven = document.getElementById('colorEven').value;
|
|
|
// var colorOdd = document.getElementById('colorOdd').value;
|
|
|
@@ -627,7 +815,7 @@ function generateBarChart(key, dataArray) {
|
|
|
// Create chart instance
|
|
|
var chart = am4core.create("chartdiv", am4charts.XYChart3D);
|
|
|
|
|
|
- console.log('判斷資料', dataArray);
|
|
|
+
|
|
|
|
|
|
chart.data = dataArray;
|
|
|
|
|
|
@@ -651,7 +839,9 @@ function generateBarChart(key, dataArray) {
|
|
|
label.wrap = true;
|
|
|
if (dataArray.length > 5) {
|
|
|
console.log('資料長度5')
|
|
|
- label.maxWidth = 50;
|
|
|
+ label.maxWidth = 60;
|
|
|
+ } else if (dataArray.length < 7) {
|
|
|
+ label.maxWidth = 70;
|
|
|
} else {
|
|
|
label.maxWidth = 100;
|
|
|
console.log('資料長度<5')
|
|
|
@@ -734,6 +924,9 @@ function generateBarChart(key, dataArray) {
|
|
|
lineSeries.data = bottomData;
|
|
|
|
|
|
downloadButton.style.display = "inline-block";
|
|
|
+ chartTypeBtn.style.display = "inline-block";
|
|
|
+ chartTypeBtn.style.opacity = "1";
|
|
|
+
|
|
|
|
|
|
// 底部線條
|
|
|
// let rectElements = document.querySelectorAll("rect");
|
|
|
@@ -761,7 +954,57 @@ function generateBarChart(key, dataArray) {
|
|
|
// end am4core.ready()
|
|
|
}
|
|
|
|
|
|
+function handleClick(element) {
|
|
|
+ const Clickvalue = element.dataset.value;
|
|
|
+ console.log(Clickvalue); // 123
|
|
|
+
|
|
|
+ get_data(Clickvalue);
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+// 圖表類型
|
|
|
+var chartTypeBtn = document.getElementById("chartType");
|
|
|
+
|
|
|
+chartTypeBtn.addEventListener('change', function () {
|
|
|
+ const selectedValue = this.value;
|
|
|
+ console.log('選擇的圖表類型:', selectedValue);
|
|
|
+
|
|
|
+ // 在此处添加处理选定图表类型的代码
|
|
|
+ if (selectedValue === 'line') {
|
|
|
+ // 处理折线图
|
|
|
+ console.log('處理折線圖', dataArray);
|
|
|
+
|
|
|
+ $('#chartdiv').hide();
|
|
|
+ chartType = 'line';
|
|
|
+ if (myChart) {
|
|
|
+ data = [];
|
|
|
+ labels = [];
|
|
|
+ myChart.destroy();
|
|
|
+ }
|
|
|
|
|
|
+ generateChart(dataArray);
|
|
|
+
|
|
|
+ } else if (selectedValue === 'bar') {
|
|
|
+ chartType = 'bar';
|
|
|
+
|
|
|
+ $('#textToChart').hide();
|
|
|
+ // 处理柱状图
|
|
|
+ console.log('處理柱狀圖', dataArray);
|
|
|
+
|
|
|
+ extractAndGenerateChart(dataArray);
|
|
|
+ } else if (selectedValue === 'doughnut') {
|
|
|
+ chartType = 'doughnut';
|
|
|
+
|
|
|
+ console.log('處理圓餅圖', dataArray);
|
|
|
+ unit_value.textContent = "";
|
|
|
+ $('#textToChart').hide();
|
|
|
+
|
|
|
+ generatePieChart(dataArray, pieFontSize, PieMaxWidth)
|
|
|
+ // 处理圆饼图
|
|
|
+
|
|
|
+ }
|
|
|
+});
|
|
|
|
|
|
|
|
|
|
|
|
@@ -1082,6 +1325,13 @@ function createTable(dataArray, unit, Label_dependent_variable, Label_independen
|
|
|
|
|
|
downloadButton.style.display = "inline-block";
|
|
|
|
|
|
+ chartTypeBtn.style.display = "inline-block";
|
|
|
+
|
|
|
+
|
|
|
+ chartTypeBtn.style.opacity = "0";
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
function getDatalabelsConfig(dataLength) {
|
|
|
@@ -1105,20 +1355,42 @@ function getDatalabelsConfig(dataLength) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+var pointRadiusValue = 0;
|
|
|
+var pointHoverRadiusValue = 0;
|
|
|
|
|
|
|
|
|
// 版型一折線圖
|
|
|
// // 创建 Chart.js 图表
|
|
|
function createChart(chartType, data, labels) {
|
|
|
+
|
|
|
$('#textToChart').show();
|
|
|
canvasPng.style.maxWidth = '';
|
|
|
canvasPng.style.maxHeight = '';
|
|
|
|
|
|
+ console.log('繪製圖表', data, labels);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ if (data.length < 15) {
|
|
|
+ pointRadiusValue = 5;
|
|
|
+ pointHoverRadiusValue = 8;
|
|
|
+
|
|
|
+ togglePoints.checked = true;
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
|
|
|
- const datalabelsConfig = data.length <= 10 ? {
|
|
|
+ const datalabelsConfig = data.length <= 15 ? {
|
|
|
formatter: function (value, context) {
|
|
|
+ // if (context.dataIndex === 0) {
|
|
|
+ // return '';
|
|
|
+ // }
|
|
|
+ // if (typeof value === 'number' && value.toString().includes('.')) {
|
|
|
+ // value = value.toFixed(4);
|
|
|
+ // }
|
|
|
+ // return value;
|
|
|
return value;
|
|
|
+
|
|
|
},
|
|
|
textStrokeColor: '#fff',
|
|
|
textStrokeWidth: 5,
|
|
|
@@ -1130,6 +1402,8 @@ function createChart(chartType, data, labels) {
|
|
|
align: 'top'
|
|
|
} : null;
|
|
|
|
|
|
+
|
|
|
+
|
|
|
ctx = document.getElementById("textToChart");
|
|
|
|
|
|
myChart = new Chart(ctx, {
|
|
|
@@ -1137,14 +1411,15 @@ function createChart(chartType, data, labels) {
|
|
|
data: {
|
|
|
labels: labels,
|
|
|
datasets: [{
|
|
|
+ label: stocknumber,
|
|
|
strokeColor: "rgba(220,220,220,1)",
|
|
|
StrokeWidth: 5,
|
|
|
data: data,
|
|
|
borderWidth: borderWidthValue,
|
|
|
- pointRadius: 0,
|
|
|
+ pointRadius: pointRadiusValue,
|
|
|
pointBorderColor: '#fff',
|
|
|
pointBorderWidth: 3,
|
|
|
- pointHoverRadius: 0,
|
|
|
+ pointHoverRadius: pointHoverRadiusValue,
|
|
|
fill: false,
|
|
|
backgroundColor: chartColor,
|
|
|
borderColor: chartColor,
|
|
|
@@ -1153,6 +1428,7 @@ function createChart(chartType, data, labels) {
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
+
|
|
|
// responsive: true, // 啟用響應式
|
|
|
maintainAspectRatio: false,
|
|
|
|
|
|
@@ -1196,6 +1472,7 @@ function createChart(chartType, data, labels) {
|
|
|
// align: 'end',
|
|
|
// } : null,
|
|
|
customLabels: null,
|
|
|
+
|
|
|
legend: {
|
|
|
display: false,
|
|
|
},
|
|
|
@@ -1304,6 +1581,7 @@ function createChart(chartType, data, labels) {
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+ console.log('第一次', myChart.options.legend)
|
|
|
|
|
|
// 注册 afterDraw 事件
|
|
|
// Chart.register({
|
|
|
@@ -1355,6 +1633,15 @@ function createChart(chartType, data, labels) {
|
|
|
chartWhitelement.style.background = "rgba(255,255,255,0.5)";
|
|
|
|
|
|
downloadButton.style.display = "inline-block";
|
|
|
+ chartTypeBtn.style.display = "inline-block";
|
|
|
+ chartTypeBtn.style.opacity = "1";
|
|
|
+
|
|
|
+
|
|
|
+ compare_box.style.display = "flex";
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
// createChart(chartType);
|
|
|
@@ -1403,12 +1690,43 @@ fontSizeInput.addEventListener('input', function () {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
+// 圓餅圖字體
|
|
|
+var pieFontSizeInput = document.getElementById('pie_fontSize');
|
|
|
+
|
|
|
+// 添加事件监听器
|
|
|
+pieFontSizeInput.addEventListener('input', function () {
|
|
|
+ // 获取输入框的值
|
|
|
+ pieFontSize = pieFontSizeInput.value;
|
|
|
+
|
|
|
+
|
|
|
+ console.log('圓餅圖字體', pieFontSize);
|
|
|
+
|
|
|
+ if (pieFontSize) {
|
|
|
+ generatePieChart(dataArray, pieFontSize, PieMaxWidth);
|
|
|
+ } else {
|
|
|
+ alert("Please enter a valid font size.");
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果表格存在，则调整其字体大小
|
|
|
+ // if (dynamicTable) {
|
|
|
+ // dynamicTable.style.fontSize = fontSize + 'px';
|
|
|
+ // }
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
+document.getElementById('PieMaxWidthRange').addEventListener('input', function () {
|
|
|
+ PieMaxWidth = Number(document.getElementById('PieMaxWidthRange').value);
|
|
|
+ console.log('圓餅圖', PieMaxWidth)
|
|
|
+ generatePieChart(dataArray, pieFontSize, PieMaxWidth);
|
|
|
+});
|
|
|
+
|
|
|
+
|
|
|
// 是否顯示point
|
|
|
|
|
|
var togglePoints = document.getElementById('togglePoints');
|
|
|
|
|
|
togglePoints.addEventListener('change', function () {
|
|
|
- console.log('checked')
|
|
|
+ console.log('checked', "change")
|
|
|
if (this.checked) {
|
|
|
myChart.data.datasets[0].pointRadius = 5;
|
|
|
myChart.data.datasets[0].pointHoverRadius = 8;
|
|
|
@@ -1438,7 +1756,7 @@ unitInput.addEventListener('input', function () {
|
|
|
span.textContent = this.value;
|
|
|
});
|
|
|
} else {
|
|
|
- unit_value.textContent = '單位:' + this.value
|
|
|
+ unit_value.textContent = '單位:' + this.value;
|
|
|
|
|
|
}
|
|
|
|
|
|
@@ -1623,6 +1941,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
|
if (bgImgUrl === './img/bg07.webp') {
|
|
|
chartTitle.style.color = "#ffff";
|
|
|
+ chartTitle.style.padding = '0px'
|
|
|
} else {
|
|
|
chartTitle.style.color = "#1c2d6d";
|
|
|
}
|
|
|
@@ -1682,13 +2001,14 @@ TitlefontSize.addEventListener('input', function () {
|
|
|
// 標題字體顏色
|
|
|
|
|
|
|
|
|
-
|
|
|
+var stocknumber;
|
|
|
// ==========================
|
|
|
|
|
|
|
|
|
let labelDependent = ""; // 圖表左側 Label
|
|
|
|
|
|
function get_data(input_text_value) {
|
|
|
+ clickExample.style.display = 'none'
|
|
|
// 重新创建取消令牌和源
|
|
|
cancelToken = axios.CancelToken;
|
|
|
source = cancelToken.source();
|
|
|
@@ -1762,6 +2082,10 @@ function get_data(input_text_value) {
|
|
|
|
|
|
var Label_independent_variable = response.data.chart_info.Label_independent_variable;
|
|
|
|
|
|
+ stocknumber = response.data.chart_info.args;
|
|
|
+
|
|
|
+ chartTypeBtn.value = chartType;
|
|
|
+
|
|
|
|
|
|
unit_data.value = response.data.chart_info.Unit_of_dependent_variable;
|
|
|
if (response.data.chart_info.Unit_of_dependent_variable == "") {
|
|
|
@@ -1788,7 +2112,7 @@ function get_data(input_text_value) {
|
|
|
unit_value.textContent = "";
|
|
|
$('#textToChart').hide();
|
|
|
|
|
|
- generatePieChart(dataArray)
|
|
|
+ generatePieChart(dataArray, pieFontSize, PieMaxWidth)
|
|
|
} else {
|
|
|
$('#chartdiv').hide();
|
|
|
generateChart(dataArray);
|
|
|
@@ -1855,7 +2179,8 @@ $(document).ready(function () {
|
|
|
|
|
|
|
|
|
function resizeChart() {
|
|
|
- if (myChart) {
|
|
|
+ console.log(myChart)
|
|
|
+ if (myChart != null) {
|
|
|
myChart.resize();
|
|
|
}
|
|
|
}
|
|
|
@@ -1891,6 +2216,8 @@ var table_setting = document.getElementById('table_setting');
|
|
|
|
|
|
var chart_category = document.getElementById('chart_category');
|
|
|
|
|
|
+var pie_setting = document.getElementById('pie_setting');
|
|
|
+
|
|
|
|
|
|
// 获取 chartDiv 元素
|
|
|
|
|
|
@@ -1911,6 +2238,8 @@ setting_button.addEventListener('click', () => {
|
|
|
lineChartSetting.style.display = 'none';
|
|
|
table_setting.style.display = 'block';
|
|
|
chart_category.style.display = 'none';
|
|
|
+ pie_setting.style.display = 'none';
|
|
|
+
|
|
|
|
|
|
} else if (chartType === "bar") {
|
|
|
console.log('柱狀圖')
|
|
|
@@ -1919,6 +2248,8 @@ setting_button.addEventListener('click', () => {
|
|
|
barChartSetting.style.display = 'block';
|
|
|
lineChartSetting.style.display = 'none';
|
|
|
table_setting.style.display = 'none';
|
|
|
+ pie_setting.style.display = 'none';
|
|
|
+
|
|
|
|
|
|
|
|
|
} else if (chartType === "doughnut") {
|
|
|
@@ -1927,8 +2258,10 @@ setting_button.addEventListener('click', () => {
|
|
|
sidebar.classList.toggle('hidden');
|
|
|
barChartSetting.style.display = 'none';
|
|
|
lineChartSetting.style.display = 'none';
|
|
|
+ pie_setting.style.display = 'block';
|
|
|
table_setting.style.display = 'none';
|
|
|
chart_category.style.display = 'none';
|
|
|
+ document.getElementById('unit_input').style.display = 'none';
|
|
|
|
|
|
} else {
|
|
|
sidebar.classList.toggle('show');
|
|
|
@@ -1936,6 +2269,8 @@ setting_button.addEventListener('click', () => {
|
|
|
table_setting.style.display = 'none';
|
|
|
barChartSetting.style.display = 'none';
|
|
|
lineChartSetting.style.display = 'block';
|
|
|
+ pie_setting.style.display = 'none';
|
|
|
+
|
|
|
}
|
|
|
|
|
|
});
|
