Question

我正在使用.NET MVC。目前，我有一个数据集，可填充JS图表的点。目前，我在数据集的data属性中有静态数据（数字）。我正在寻找有关如何使用SQL DB中的数据填充data属性的想法，教程，操作方法。我四处张望，看到了很多像我一样的静态数据教程。

var ctx2 = document.getElementById("totalSpendingChart");
    var data2 = {
        datasets: [{
            label: "Spending",
            data: [8,10,11,15], /* THIS.. how do I get SQL data here? */
            borderColor: "#e8144d"
        }],
        labels: [ "2017", "2018", "2019"]
    };

 var LinChart1 = new Chart(ctx2, {
        type: "line", data: data2, options: {
            pointStyle: "circle",
            legend: { display: false },
            scales: { yAxes: [{ display: true, gridLines: { display: true } }], xAxes: [{ display: false, gridLines: { display: false } }] }
        }
    });

Answer 1

您需要以某种方式从后端（SQL）到前端（JavaScript）获取数据。

选项1

您可以将数据注入模板（在渲染图表之前）。例如，通过here并使用javascript进行解析：

<script>
var chartData = JSON.parse(<%= DataSet %>);
</script>

选项2

您可以创建一个端点（用于从中获取数据的URL），该端点可以在JavaScript中使用serializing your data to JSON get请求来使用。加载数据后，您可以呈现图表：

$.ajax("https://your-endpoint-to-fetch-the-data")
  .done(renderChart);

function renderChart(data) {
  var ctx = document.getElementById("totalSpendingChart");

  var chartData = {
    datasets: [{
      data: data,
      // ...
    }]
  };

  var lineChart = new Chart(ctx, {
    // ...
  });
};

（此示例将jQuery用于ajax部分）

使用SQL数据填充Javascript图表（折线图）

1 个答案: