如何在Javascript中将数组结果引用到Chartjs数据集中

57hvy0tb 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(164)

我已经设法按状态获得了列表中项目的计数，但似乎不知道如何将数据添加到Chart.js中。我尝试从图表中引用我的数据集，但似乎不起作用。如果有任何帮助，我将不胜感激。我拼凑了一些代码，试图让它起作用，但似乎不能得到最后一部分。ps。此代码正在SharePoint内容编辑器中使用
谢谢你的好意，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<button onclick="GetListItems();" type="button">Get All List Items</button>
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  function GetListItems() {
    var url = "https://contoso.sharepoint.com/sites/Mysite/_api/web/lists/getByTitle('Mylist')/items?$top=500";
    $.ajax({
      url: url,
      type: "GET",
      headers: {
        "accept": "application/json; odata=verbose"
      },
      success: onSuccess
    });
  }

  function onSuccess(data) {
    var items = data.d.results;
    const MyDataset = [];

    var NewItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "New";
    });
    var InProcItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "In Process";
    });
    var CompItems = items.filter(function(ItemStatus) {
      return ItemStatus.Status == "Completed";
    });
    MyDataset.push(NewItems.length);
    MyDataset.push(InProcItems.length);
    MyDataset.push(CompItems.length);
    console.log(MyDataset);
  }

  const labels = ['New', 'Completed', 'Inproccess'];

  const data = {
    labels: labels,
    datasets: [{
      label: 'My First dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [5, 5, 5, 2, 2, 30, 45],// use MyDataset here instead of random.
    }]
  };

  const config = {
    type: 'bar',
    data: data,
    options: {}
  };
</script>

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

chart.js

来源：https://stackoverflow.com/questions/73470772/how-to-reference-array-results-into-chartjs-dataset-in-javascript

2条答案

按热度按时间

bwitn5fc1#

这应该是你所期望的。我不能测试，因为数据 AJAX 调用是不公开的。

<!-- External Lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- HTML / Template -->
<button onclick="GetListItems();" type="button">Get All List Items</button>
<div>
    <canvas id="myChart"></canvas>
</div>

<!-- Javascript -->
<script>
    function GetListItems() {
        var url = "https://contoso.sharepoint.com/sites/Mysite/_api/web/lists/getByTitle('Mylist')/items?$top=500";
        $.ajax({
          url: url,
          type: "GET",
          headers: {
            "accept": "application/json; odata=verbose"
          },
          success: onSuccess
        });
    }

    function onSuccess(data) {
        var items = data.d.results;
        var MyDataset = [];

        var NewItems = items.filter(function(ItemStatus) {
          return ItemStatus.Status == "New";
        });
        var InProcItems = items.filter(function(ItemStatus) {
          return ItemStatus.Status == "In Process";
        });
        var CompItems = items.filter(function(ItemStatus) {
          return ItemStatus.Status == "Completed";
        });
        MyDataset.push(NewItems.length);
        MyDataset.push(InProcItems.length);
        MyDataset.push(CompItems.length);
        console.log(MyDataset);
        createChar(MyDataset);
    }

    function createChar(dataset) {
        const labels = ['New', 'Inproccess', 'Completed'];
        const data = {
            labels: labels,
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data:dataset
            }]
        };
        const config = {
            type: 'bar',
            data: data,
            options: {}
        };
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    }
</script>

赞(0）回复(0）举报 2022-11-06

sxpgvts32#

您指定3个标签，并在数据中提供7个元素。
要解决问题，请尝试使用简单的配置

const config = {
    type: 'bar',
    labels: labels // Your array of label
    data: {
        datasets: [{
          data: [1, 2, 3], // Random data
        }],
    }
};

当显示某些内容时，尝试增加复杂性。
"通过猜测，我相信你想要这样的东西"

const config = {
    type: 'bar',
    labels: labels, // Your array of label
    data: {
        datasets: [{
            data: [
                {x:'New', y:1},{x:'Completed', y:10},{x:'Inproccess', y:100},
                {x:'New', y:2},{x:'Completed', y:20},{x:'Inproccess', y:200},
                {x:'New', y:3},{x:'Completed', y:30},{x:'Inproccess', y:300},
             ]
        }]
    }
};

这很难帮助你，因为你没有指定你想看到什么样的结果图表...

您的代码正在运行（代码段）

第一个

赞(0）回复(0）举报 2022-11-06

我来回答

如何在Javascript中将数组结果引用到Chartjs数据集中

2条答案

相关问题

热门标签

最新问答