Sanlih-Entertainment-Television/js/demo/text-to-chart2.js

let inputField = document.getElementById("keyword_data");
let sendButton = document.getElementById("send_data");

function sendButtonClickHandler() {
  console.log(inputField.value);
  let input_text_value = inputField.value;
  get_data(input_text_value);
}

sendButton.addEventListener("click", sendButtonClickHandler);

inputField.addEventListener("keyup", function (event) {
  // 判斷是否按下 Enter 鍵 (key code: 13)
  if (event.key === "Enter") {
    // 呼叫按鈕點擊事件處理函數
    sendButtonClickHandler();

  }
});

function apiLoading() {
  document.getElementById('chartDataLoading').style.display = 'block';
}

function apiHideLoading() {
  document.getElementById('chartDataLoading').style.display = 'none';

}

let labelDependent = "";

function get_data(input_text_value) {
  apiLoading();

  axios.get('https://cmm.ai:8080/answer?question=' + input_text_value)
    .then(response => {
      apiHideLoading();
      console.log(response);

      chartType = response.data.chart_info.Chart_type;

      switch (chartType) {
        case "line":
          document.getElementById("inlineRadio4").checked = true; // 折線圖
          break;
        case "bar":
          document.getElementById("inlineRadio5").checked = true; // 柱狀圖
          break;
        case "pie":
          document.getElementById("inlineRadio6").checked = true; // 圓餅圖
          break;
        case "table":
          document.getElementById("inlineRadio7").checked = true; // 表格
          break;
        default:
        // 默認情況
      }

      let dataArray = response.data.data;
      labelDependent = response.data.chart_info.Label_dependent_variable;
      generateChart(dataArray);
    })
    .catch(error => {
      apiHideLoading();
      console.error('發生錯誤:', error);
    });
}
// generateChart();
// 模板2
function generateChart(dataArray) {
  console.log('labelDependent', labelDependent);
  // Themes begin
  am4core.useTheme(am4themes_animated);
  // Themes end

  // Create chart instance
  var chart = am4core.create("chartdiv", am4charts.XYChart3D);

  console.log(dataArray);

  chart.data = dataArray;

  chart.angle = 30; // 圖表角度
  chart.depth = 25;  // 圖表深度


  let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "stock_name";
  categoryAxis.renderer.labels.template.rotation = 0;
  categoryAxis.renderer.labels.template.hideOversized = false;
  categoryAxis.renderer.minGridDistance = 20; // 間距
  // categoryAxis.renderer.labels.template.horizontalCenter = "left";
  // categoryAxis.renderer.labels.template.verticalCenter = "middle";
  // categoryAxis.tooltip.label.rotation = 90;
  // categoryAxis.tooltip.label.horizontalCenter = "right";
  // categoryAxis.tooltip.label.verticalCenter = "middle";

  // label 換行
  let label = categoryAxis.renderer.labels.template;
  label.wrap = true;
  label.maxWidth = 100;


  categoryAxis.renderer.cellEndLocation = 0.5; // 減少值可以增加間距

  let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.title.text = labelDependent; // Y軸
  valueAxis.title.fontWeight = "bold";

  // Create series
  var series = chart.series.push(new am4charts.ColumnSeries3D());
  series.dataFields.valueY = "total_volume";
  series.dataFields.categoryX = "stock_name";
  series.name = "total_volume";
  series.tooltipText = "{categoryX}: [bold]{valueY}[/]";
  series.columns.template.fillOpacity = .8;

  let columnTemplate = series.columns.template;
  columnTemplate.strokeWidth = 2;
  columnTemplate.strokeOpacity = 1;
  columnTemplate.stroke = am4core.color("#FFFFFF");

  // columnTemplate.adapter.add("fill", function (fill, target) {
  //     return chart.colors.getIndex(target.dataItem.index);
  // })

  // 設置基數和偶數顏色
  columnTemplate.adapter.add("fill", function (fill, target) {
    return target.dataItem.index % 2 === 0 ? am4core.color("#288D97") : am4core.color("#427D7E");
  });

  columnTemplate.adapter.add("stroke", function (stroke, target) {
    return chart.colors.getIndex(target.dataItem.index);
  })

  // // 加上白色線條
  // series.columns.template.events.on("validated", function (event) {
  //   let column = event.target;
  //   let whiteLine = column.createChild(am4core.Line);

  //   whiteLine.stroke = am4core.color("#ffffff");

  //   whiteLine.strokeWidth = 1.3; // 線條寬度
  //   whiteLine.strokeOpacity = 0.5;// 透明度
  //   whiteLine.x1 = column.pixelWidth / 1;
  //   whiteLine.y1 = 0;
  //   whiteLine.x2 = column.pixelWidth / 1;
  //   whiteLine.y2 = column.pixelHeight;
  // });

  chart.cursor = new am4charts.XYCursor();
  chart.cursor.lineX.strokeOpacity = 0;
  chart.cursor.lineY.strokeOpacity = 0;

  categoryAxis.renderer.grid.template.strokeOpacity = 0; // 隱藏 X 軸
  valueAxis.renderer.grid.template.strokeOpacity = 0; // 隱藏 Y 軸
  valueAxis.renderer.line.strokeOpacity = 0;

  // LineSeries 底部線條
  var lineSeries = chart.series.push(new am4charts.LineSeries());
  lineSeries.dataFields.valueY = "bottom";
  lineSeries.dataFields.categoryX = "stock_name";
  lineSeries.stroke = am4core.color("#000000")
  lineSeries.strokeWidth = 2;
  lineSeries.strokeOpacity = 1

  var bottomData = [];
  for (var i = 0; i < dataArray.length; i++) {
    bottomData.push({ "stock_name": dataArray[i].stock_name, "bottom": 0 });
  }
  lineSeries.data = bottomData;

  // 底部線條
  // let rectElements = document.querySelectorAll("rect");
  // // let widthValue = 0;
  // let fifthRectElement = rectElements[3];
  // // fifthRectElement.style.position = "relative";
  // setTimeout(() => {
  //   let width = fifthRectElement.getAttribute("width");
  //   // widthValue = parseFloat(width);
  //   console.log('rectElements', rectElements);
  //   console.log('fifthRectElement', fifthRectElement);
  //   console.log('width', width);

  //   let line = document.createElement("div");
  //   line.style.position = "absolute";
  //   line.style.bottom = "162px";
  //   line.style.right = "40px";
  //   line.style.width = `${parseFloat(width)}px`;
  //   line.style.height = "2px";
  //   line.style.backgroundColor = "#000000";

  //   document.getElementById("chartdiv").appendChild(line);
  // }, 10)



  // end am4core.ready()
}