登录
当前位置： 首页 > 知识库问答 >
问题：

我该怎么做才能确保每次从下拉列表中选择图表时都重新加载它？

汪跃
2023-03-14

嘿，伙计们，我已经建立了一个下拉菜单，允许我从不同的角色选择。每次我选择一个角色，我的折线图加载。当我选择另一个选项时，它会再次加载。但是，当我再次选择我已经决定的选项时，它不会再次加载。所以它只加载一次然后再也不加载了。你知道我该怎么解决它吗？

<select name="job-role" id="job-role" onchange="updateChartType()">
  <option value="" disabled selected hidden>Select a Job Role</option>
  <option value="backend">Backend Engineer</option>
  <option value="frontend">Frontend Engineer</option>
  <option value="mobile">Mobile Engineer</option>
  <option value="full">Full-stack Engineer</option>
  <option value="devops">DevOps & Infrastructure </option>
  <option value="security">Security Engineer</option>
  <option value="dataan">Data Analysis & BI</option>
  <option value="dataen">Data Engineer</option>
  <option value="datasci">Data Scientist</option>

</select>

<canvas id="jobChart"></canvas>



const ctx = document.getElementById('jobChart').getContext('2d')
const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9+"],
    datasets: []
  },
});

const jobDatasets = {
  
  
  backend: [{
    label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    lineTension: 0.3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    lineTension: 0.3,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    lineTension: 0.3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    lineTension:0.3,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }] , 
  


  frontend: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [40, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }] , 
  
  

   
  mobile: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
   
   
   
   
  full: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
    
    
    
    
    
  devops: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  security: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  
  
  
  dataan: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  
  dataen: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
  
  
  
  
  datasci: 
  [{ label: "25th Percentile",
    backgroundColor: '#c4c1ff',
    pointBackgroundColor: "645bff",
    borderColor: '#645bff',
    fill:false,
    pointRadius: 0,
    borderWidth:1,
    pointBorderWidth: 3,
    pointHoverRadius:3,
    pointHitRadius:3,
    data: [27, 36, 38, 46, 50, 54, 63, 65, 71, 77]
  }, {
    label: "10th - 90th Percentile",
    fill:false,
    borderColor: "#645bff",
    backgroundColor: "#645bff",
        pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    borderWidth: 1,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [39, 66, 62, 65, 71, 80, 82, 86, 99, 107]
  }, 
  {
    label: "Median",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#0d0e25",
        borderWidth: 1,
    pointRadius: 2,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    data: [31, 39, 46, 51, 54, 61, 65, 70, 79, 85]
  },
  
  {
    label: "25th - 75th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#645bff",
    pointRadius: 0,
    lineTension: 0.1,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    borderCapStyle: 'butt',
    borderDash: [],
    borderDashOffset: 0.0,
    borderJoinStyle: 'miter',
    data: [37, 50, 51, 55, 63, 69, 73, 80, 85, 94]
  },
  
  {
    label: "10th Percentile",
    fill:false,
    borderColor: "#c4c1ff",
    backgroundColor: "#c4c1ff",
    pointBackgroundColor: "#c4c1ff",
    pointHoverBackgroundColor: "#c4c1ff",
    pointHoverBorderColor: "#c4c1ff",
    pointStyle: "circle",
    borderWidth: 1,
    lineWidth: 1,
    hoverRadius: 9,
    pointRadius: 0,
    pointBorderWidth: 3,
    pointHoverRadius: 3,
    pointHitRadius: 3,
    lineTension: 0.3,
    data: [24, 31, 35, 38, 46, 48, 52, 55, 59, 67]
  }],
  
  
 
 }
  

document.getElementById('job-role').addEventListener('change', function() {
  chart.data.datasets = jobDatasets[this.value]
  chart.update()
});

共有1个答案

何兴学
2023-03-14

update函数由“change”事件触发（如您在addEventsListener参数中明确定义的，可以考虑添加

document.getElementById('job-role').addEventListener('click', function() {
  chart.update()
});

你的代码...

 类似资料：
  • 一次只能选择一个下拉列表

    我是一个全新的领域，我现在有两个独立的下拉菜单。我正在尝试使用户能够在同一时间只能从两者中的一个进行选择。例如，如果用户从中选择某项内容，然后从中选择另一项内容，则变为未选中。 下面是我在html部分中的片段 这里是JS 这是一个简单的演示。你可以注意到你可以同时选择一辆汽车和一辆卡车。此时应仅为汽车或卡车:https://jsfidle.net/j82ryu5k/2/

  • 从下拉列表中选择时的事件

    假设用户从下拉列表中选择option2，那么f1（）将在下拉列表的值发生更改时执行，我正在监听更改事件。现在，用户再次单击下拉列表并选择option2，在这种情况下，下拉列表的值不变，因此f1不会执行。现在，我希望每次用户从下拉列表中选择某个值时都执行f1，无论值是否更改。

  • 我希望每次选择组合框值时都运行一个子例程。我该怎么做？

    我有一个包含三列的Excel文件。每行都是唯一的。有三个组合框对应于这三列。 当第一个组合框中的选项被选中时，我希望第二个组合框填充来自第二列的项目，这些项目对应于第一个组合盒中的选择。即： < code>-亚当|苹果|种子 < code>- Adam | Orange | Peel < code>- Jess |香蕉|果皮 这里第一列有数据Adam， Jess。第一个组合框已经有两个唯一的选项A

  • 从Selenium中的下拉列表中选择

    我是硒的新手，我试图从下拉列表中选择一个选项。下拉列表的超文本标记语言如下： WebElement的是： 我已经尝试了几乎所有的方法，我可以在互联网上找到，但没有任何效果。我试图使用类，包装了，但它抛出了一个异常。 我试图丢失列表中的所有选项，但在这种情况下得到了异常应该有标签，但它有。我需要使用作为findelements的标识符。 请帮我解决这个问题。

  • 从div类下拉列表中选择-Selenium

    我正在尝试从下拉列表中选择一个选项，该选项在单击定位器之前不会填充。这是我在Firebug中看到的： 到目前为止，我拥有的代码是： 我得到一个意外的TagNameException：元素应该是“选择”，但是“div”。我不知道如何处理这个，因为我以前只使用过选择。 假设我想为代理代码选择“523-23-20275”。我该怎么做？ 感谢您的帮助！谢谢

  • 使用量角器从下拉列表中选择选项不会关闭我的下拉列表

    仍然是新的量角器，茉莉等。 今天，我正在尝试在我的一个测试中与下拉选项列表进行交互。 这是: var 选择下降 = 元素（按.css（“.下拉列表”）;所有选项 = 元素（按选项（“某些选项”））; 现在点击下拉列表 selectDropDown.click（）； 单击索引为 2 的下拉列表中的“选项” allOptions.get（2）. Click（）； 一些用于断言的代码。。。。 现在的问题

相关问答

从div类下拉列表中选择-Selenium使用量角器从下拉列表中选择选项不会关闭我的下拉列表“追加不添加选择值”选项下拉列表当选择了另一个“选择”下拉列表中的一个选项时，如何显示“选择”下拉列表在硒WebDrive中选择下拉列表

相关文章

HTML选择框的高度（下拉列表）如何使用selenium从下拉列表中选择一个值？Thymeleaf中地图的从属下拉列表从表中选择“记录多次”微信小程序实现列表下拉刷新上拉加载

相关阅读

程序员过了35岁以后，到底应该怎么走才能保证自己不失业？今晚阿里云大家都做的怎么样？怎么用英语做自我介绍OrientDB重新加载记录Oracle表添加列

相关工具

iOS 下拉列表图片下载和保存UIWebView 下拉刷新列表刷新 SBJSON HTTP快速集成下拉上拉刷新

相关文档

每个程序员都应该了解的内存知识图表秀 帮助文档猴子都能懂的 GIT 入门Python 爱好者社区文章列表Linux 就该这么学
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.