实现本地存储成动态图表-chart js

问题描述 投票：0回答：1

我正在尝试为我的学校项目制作一个成本图表，以衡量项目的计划成本和实际成本，由于这里的另一篇文章，我让本地存储在正常的条形图中工作，但无法按照要求在该图表上工作两个数据集。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LS&INPUTS - Colum</title>

    <link rel="stylesheet" href="style.css">

  </head>
  <body>

    <div class="card">
    <p class="chart-heading">Job progress</p>

    <div class="container">
      
      <div class="chart-container">
        <canvas id="myChart"></canvas>
      </div>

        <div class="inputs-container">
          <div class="input-title">
            <p>Job</p>
            <p>Job progress(%)</p>
          </div>
              <!-- Input 1 -->
              <div class="inputfield">
                <input class="labelinput" type="text" id="input1text" onkeyup="updateLabel()" maxlength="10">
                <input class="plannedcost" type="number" id="plannedinput1" onchange ="updatePC()">
                <input class="actualcost" type="number" id="actualinput1" onchange ="updateAC()">
              </div>
              
              <!-- Input 2 -->
              <div class="inputfield">
                <input class="labelinput" type="text" id="input2text" onkeyup="updateLabel()" maxlength="10">
                <input class="plannedcost" type="number" id="plannedinput2" onchange="updatePC()">
                <input class="actualcost" type="number" id="actualinput2" onchange ="updateAC()">
              </div>

              <!-- Input 3 -->
              <div class="inputfield">
                <input class="labelinput" type="text" id="input3text" onkeyup="updateLabel()" maxlength="10">
                <input class="plannedcost" type="number" id="plannedinput3" onchange="updatePC()">
                <input class="actualcost" type="number" id="actualinput3" onchange ="updateAC()">
              </div>

              <!-- Input 3 -->
              <div class="inputfield">
                <input class="labelinput" type="text" id="input4text" onkeyup="updateLabel()" maxlength="10">
                <input class="plannedcost" type="number" id="plannedinput4" onchange="updatePC()">
                <input class="actualcost" type="number" id="actualinput4" onchange ="updateAC()">
              </div>

              <!-- Input 5 -->
              <div class="inputfield">
                <input class="labelinput" type="text" id="input5text" onkeyup="updateLabel()" maxlength="10">
                <input class="plannedcost" type="number" id="plannedinput5" onchange="updatePC()">
                <input class="actualcost" type="number" id="actualinput5" onchange ="updateAC()">
              </div>

            </div>
          </div>
        </div>    

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

let labelData = loadLabelFromLocalStorage();
let plannedCostData = loadPCFromLocalStorage();
let actualCostData = loadACFromLocalStorage();
setUILabel(labelData);
setUIPCData(plannedCostData);
setUIACData(actualCostData);

const ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: labelData,
    datasets: [{
      data: actualCostData,
      backgroundColor: "#2E9CCA",
    },{
      data: plannedCostData,
      backgroundColor: "#AAABB8",
    }]
  },
  options: {
    plugins: {
      legend: {
          display: false,
        }
      },

    scales: {
      y: {
        beginAtZero: true,
        min: 0,
      }
    }
  }
});

// add label
function addLabel(chart, data) {
  chart.data.labels.forEach((dataset) => {
    dataset.data = [...data]
  });
  chart.update();
  } 
  
  function updateLabel(event) {
      if (event) event.preventDefault();
      labelData = getUILabel();
      saveLabelToLocalStorage(labelData);
      addLabel(myChart, labelData);
  }
  
  //Updating chart with values
  function setUILabel(data) {
    document.querySelectorAll('.labelinput').forEach((el, i) => el.value = data[i] || '');
  }
  
  function getUILabel() {
    return Array.from(document.querySelectorAll('.labelinput'))
        .map(el => String(el.value));
  }
  
  function saveLabelToLocalStorage(labelData) {
    localStorage.setItem('Label', JSON.stringify(labelData));
  }
  
  function loadLabelFromLocalStorage() {
    return JSON.parse(localStorage.getItem('Label') || '[]');
  }

  ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 //add "planned cost" data
 function addPC(chart, data) {
  chart.data.datasets.forEach((dataset) => {
      dataset.data = [...data]
  });
  chart.update();
} 

//Calling input values to update chart
function updatePC(event) {
    if (event) event.preventDefault();
    plannedCostData = getUIPCData();
    savePCToLocalStorage(plannedCostData);
    addPC(myChart, plannedCostData);
}

//Updating chart with values
function setUIPCData(data) {
  document.querySelectorAll('.plannedcost').forEach((el, i) => el.value = data[i] || '');
}

function getUIPCData() {
  return Array.from(document.querySelectorAll('.plannedcost'))
      .map(el => Number(el.value));
}

function savePCToLocalStorage(plannedCostData) {
  localStorage.setItem('number2', JSON.stringify(plannedCostData));
}

function loadPCFromLocalStorage() {
  return JSON.parse(localStorage.getItem('number2') || '[]');
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//add actual cost 
 function addAC(chart, data) {
  chart.data.datasets.forEach((dataset) => {
      dataset.data = [...data]
  });
  chart.update();
} 

//Calling input values to update chart
function updateAC(event) {
    if (event) event.preventDefault();
    actualCostData = getUIACData();
    saveACToLocalStorage(actualCostData);
    addAC(myChart, actualCostData);
}

//Updating chart with values
function setUIACData(data) {
  document.querySelectorAll('.actualcost').forEach((el, i) => el.value = data[i] || '');
}

function getUIACData() {
  return Array.from(document.querySelectorAll('.actualcost'))
      .map(el => Number(el.value));
}

function saveACToLocalStorage(actualCostData) {
  localStorage.setItem('number3', JSON.stringify(actualCostData));
}

function loadACFromLocalStorage() {
  return JSON.parse(localStorage.getItem('number3') || '[]');
}

body {
  background-color:#25274D;
}

.container {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  display: block;
  max-width: 100%;
}

.card {
  width: 57.5rem;
  height: 18rem;
  background-color: white;
  border-radius: 4px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.inputfield {
  display: flex;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  border-radius: 4px;
  width: 0.5rem;
}

.inputs-container {
  display: grid;
  gap: 0.65rem;
}

.chart-heading {
  text-align: left;
  padding: 1.2rem 0 1.2rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  width: 100%;
}

.input-title {
  display: flex;
  gap: 8rem;
}

.plannedcost {
  width: 3.5rem;
}

.actualcost {
  width: 3.5rem;
}

我尝试了上面的代码，但是当增加计划成本栏的值时，相邻值实际成本栏也会增加。

更改标签效果很好，但是当增加值时，它无法按预期工作，我认为这是因为下面的代码用于计划成本和实际成本，但我不确定如何选择要使用的数据集每个栏。

 function addBarData(chart, data) {
chart.data.datasets.forEach((dataset) => {
    dataset.data = [...data]
});
chart.update();

}

javascript chart.js local-storage
1个回答
0
投票

我会期待

function addBarData(chart, actualCostData, plannedCostData) {
  chart.data.datasets = [{ 
    data: actualCostData,
    backgroundColor: "#2E9CCA",
  },{
    data: plannedCostData,
    backgroundColor: "#AAABB8",
  }];
  chart.update();
}

为了更好地工作

如果有必要，请尝试这个

function addBarData(chart, data, whichData) {
  const idx = whichData === "actual" ? 0:1;
  chart.data.datasets[idx].data = data;
  chart.update();
} 

and 

function updateAC(event) {
  if (event) event.preventDefault();
  actualCostData = getUIACData();
  saveACToLocalStorage(actualCostData);
  addBarData(myChart, actualCostData, "actual");
}


function updatePC(event) {
  if (event) event.preventDefault();
  plannedCostData = getUIPCData();
  savePCToLocalStorage(plannedCostData);
  addBarData(myChart, plannedCostData, "planned");
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.