Question

我使用以下脚本从api端点获取数据以填充我的图表，一切正常。

现在我不仅想用数据填充我的图表，还要直接在我的html脚本中打印出数据，并使用类似document.write（）函数的东西。

如果我写例如document.write（DE10YB_EUR_price）它不会显示任何内容。

有人可以告诉我如何在HTML中将DE10YB_EUR_price打印为纯文本吗？

非常感谢和亲切的问候

{% block jquery%}

var endpoint = '/technicalAnalalysis/api/data/'

var chartData = []
var chartLabels = []

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){

        DE10YB_EUR_price = data.DE10YB_EUR_closeBid 
        DE10YB_EUR_dateData = data.DE10YB_EUR_dates 
        DE10YB_EUR_upperBand = data.DE10YB_EUR_upperband 
        DE10YB_EUR_middleBand = data.DE10YB_EUR_middleband 
        DE10YB_EUR_lowerBand = data.DE10YB_EUR_lowerband 
        DE10YB_EUR_rsi = data.DE10YB_EUR_RSI 
        DE10YB_EUR_minusDI = data.DE10YB_EUR_ADX_Minus 
        DE10YB_EUR_plusDI = data.DE10YB_EUR_ADX_Plus 
        DE10YB_EUR_adx = data.DE10YB_EUR_ADX 
        DE10YB_EUR_macd = data.DE10YB_EUR_macd 
        DE10YB_EUR_macdsignal = data.DE10YB_EUR_macdsignal 
        DE10YB_EUR_macdhist = data.DE10YB_EUR_macdhist 

        setChart()

    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})

function setChart(){

var ctx = document.getElementById('DE10YB_EUR_priceData').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: DE10YB_EUR_dateData,
    datasets: [{
      label: 'DE10YB_EUR',
      data: DE10YB_EUR_price,
      backgroundColor: "rgba(0,0,0,0)",
      borderColor: 'rgba(0, 0, 0, 1)',
      borderWidth: 2,
    } ]
  },
    options:{
        elements: {
             point:{
                radius: 0
                    }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:false
                }
            }],
            xAxes: [{
                display: false
            }]
        }
    }
});

Answer 1

假设你的html中有这样的东西：

<div id="price"></div>
<div id="date-data"></div>
<!-- and so on -->

你可以做到：

$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){

        DE10YB_EUR_price = data.DE10YB_EUR_closeBid 
        DE10YB_EUR_dateData = data.DE10YB_EUR_dates 
        $('#price').text(DE10YB_EUR_price)
        $('#date-data').text(DE10YB_EUR_dateData )
        // and so on
    },
})

Answer 2

假设：

从您的代码中，看起来您正在使用Chartjs。所以，我的假设是DE10YB_EUR_dateData（标签）和DE10YB_EUR_price（数据）是数组。以下代码将创建一个表，其中标题行显示标签，数据行显示数据。

解决方案：

您需要在HTML中创建一个div并为其指定一个id（例如“data-container”）。接下来，使用以下脚本将标签和数据转换为HTML表格，然后将其附加到DIV，如下所示。

HTML：

<div id="data-container"></div>

JavaScript的：

var makeTable = function (labels, data) {
    var table = $('<table border=1>');

    // Header Row

    var tblHeader = "<tr>";
    for (var label in labels) {
        tblHeader += "<th>" + label + "</th>";
    }
    tblHeader += "</tr>";
    $(tblHeader).appendTo(table);

    // Data Row

    var dataRow = "<tr>";
    for (var x in data) {
        dataRow += "<td>" + x + "</td>";
    }
    dataRow += "</tr>";
    $(dataRow).appendTo(table);

    return ($(table));
};

用法：

var table = makeTable(DE10YB_EUR_dateData, DE10YB_EUR_price);
$(table).appendTo("#data-container");

如何在html中打印ajax，jquery，javascript中的数据？

2 个答案: