javascript - 如何显示隐藏在颜色后面的折线图？

Question

我在下面创建了 5 个折线图。每个图表都有自己的值，对于其中一些，我想使用填充选项。但是，我注意到在使用填充选项后，我的中线图隐藏在颜色后面。这不正是我想做的。我想从上面的线填充该区域，直到到达中位数图。应该看到中位数图。现在它隐藏在颜色后面。我做了一张图片来更清楚地说明这个场景。

[![在此处输入图像描述][1]][1]

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
 <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
 <script src="https://cdn.sstatic.net/clc/clc.min.js?v=8b381e90b84c"></script>




    <select id="chartType" onchange="updateChartType()"> 
      <option value="line1">Backend Engineer</option>
      <option value="line2">Frontend Engineer</option>
      <option value="line3">Fullstack Engineer</option>
      <option value="line4">Mobile Engineer</option>
      <option value="line5">Engineering Management</option>
      <option value="line6">DevOps & Infrastructure</option>
      <option value="line7">Data Engineer</option>
      <option value="line8">Data Analysis & BI</option>
      <option value="line9">Data Scientist</option>
      <option value="line10">QA & Testing Engineer</option>
      <option value="line11">Security Engineer</option>


    </select>
    <div class="chart_container">
      <canvas id="line1Chart" style="background-color: black"></canvas>
      <canvas id="line2Chart"></canvas>
      <canvas id="line3Chart"></canvas>
      <canvas id="line4Chart"></canvas>
      <canvas id="line5Chart"></canvas>
      <canvas id="line6Chart"></canvas>
      <canvas id="line7Chart"></canvas>
      <canvas id="line8Chart"></canvas>
      <canvas id="line9Chart"></canvas>
      <canvas id="line10Chart"></canvas>
      <canvas id="line11hart"></canvas>
    </div>


<script> 


    let select = document.querySelector('#chartType');

    select.addEventListener('change', showHide);

    function showHide() {
      // concat Chart for the canvas ID
      let chart = this.options[select.selectedIndex].value + 'Chart';
        document.querySelectorAll('canvas')
        .forEach(c => {
          c.style.display = (c.id === chart) ? 'inherit' : 'none';
        })
    }



function updateChartType() {


  if (line1Chart) {
    line1Chart.destroy();
  }


    var ctx = document.getElementById("line1Chart");
    var line1Chart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["1", "2", "3", "4", "5","6","7","8","9+"],
        datasets: [
            
        
        {
          label: '25th Percentile',
          fill:false,
          data: [28, 35, 40, 45, 50, 55, 62, 66, 70, 78],
          borderColor: ['#7673FF'],
          backgroundColor: ['#7673FF'],
          borderWidth: 1,
          radius: 2,
          //borderDash:([3]),
          pointBackgroundColor: "#7673FF",
          pointBorderColor: "#7673FF",
          pointBorderWidth: "2",
          pointStyle: "rectRounded",
          pointHoverBackgroundColor: "#7673FF",
          pointHoverBorderColor: "#7673FF",
          pointHoverRadius: "2",
          //showLine:false,
          //steppedLine:"false"
        },{
          label: '10th Percentile',
          fill:false,
          data: [25, 30, 36, 39, 45, 49, 53, 56, 60, 68],
          borderColor: ["#37327E"],
          backgroundColor: ['#37327E'],
          borderWidth: 1,
          radius: 2,
          //borderDash:([3]),
          pointBackgroundColor: "#37327E",
          pointBorderColor: "#37327E",
          pointBorderWidth: "2",
          pointStyle: "rectRounded",
          pointHoverBackgroundColor: "#37327E",
          pointHoverBorderColor: "#37327E",
          pointHoverRadius: "2",
          //showLine:false,
          //steppedLine:"false"
        },{
          label: '25th - 75th Percentile',
          fill:3,
          radius: 2,
          data: [35, 50, 51, 55, 63, 69, 73, 80, 85, 94],
          borderColor: ['#645bff'],
          backgroundColor: ['#645bff'],
          borderWidth: 1,
          //borderDash:([3]),
          pointBackgroundColor: "red",
          pointBorderColor: "#645bff",
          pointBorderWidth: "2",
          pointStyle: "rectRounded",
          pointHoverBackgroundColor: "#645bff",
          pointHoverBorderColor: "#645bff",
          pointHoverRadius: "2",
          //showLine:false,
          //steppedLine:"false"
        },{
          label: 'Median',
          fill:false,
          lineWidth: 3,
          radius: 3,
          data: [30, 40, 45, 50, 56, 60, 66, 73, 78, 85],
          borderColor: '#CBCAFF',
          backgroundColor: '#CBCAFF',
          strokeColor: "#CBCAFF",
          borderWidth: 1,
          pointRadius:2,
          pointBorderWidth:3,
          pointHoverRadius:3,
          pointHitRadius:3,
          //borderDash:([3]),
          pointBackgroundColor: "#CBCAFF",
          pointBorderColor: "#CBCAFF",
          pointStyle: "rectRounded",
          pointHoverBackgroundColor: "#CBCAFF",
          pointHoverBorderColor: "#CBCAFF",
          showLine:true,
        }
    ,{
          label: '10th - 90th Percentile',
          fill:false,
          radius: 3,
          data: [40, 65, 63, 64, 72, 79, 83, 87, 100, 108],
          borderColor: ['#37327E'],
          backgroundColor: ['#37327E'],
          borderWidth: 1,
          //borderDash:([3]),
          pointBackgroundColor: "#37327E",
          pointBorderColor: "#37327E",
          pointBorderWidth: "2",
          pointStyle: "rectRounded",
          pointHoverBackgroundColor: "#37327E",
          pointHoverBorderColor: "#37327E",
          pointHoverRadius: "2",
          //showLine:false,
          //steppedLine:"false"
        },
    
    
    
    
    
    
    
    
    ]
      },
      options: {plugins:{filler:{propagate:false}},tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var label = data.datasets[tooltipItem.datasetIndex].label || '';
            if (label) {
              label += ': ';
            }
            if (label === "25th - 75th Percentile: ") {
              label = "75th Percentile: "
            }
            if (label === "10th - 90th Percentile: ") {
              label = "90th Percentile: "
            }
            label += tooltipItem.yLabel
            return label;

          }
        }
      }, 
        title: {
          display: true,
          text: "Backend Engineer",
          fontSize: 20,
          fontColor: "rgba(20,20,20,1)"
        },


        legend: {
          display: true,
          onClick: (e) => e.stopPropagation(),
          position: 'top',
          labels: {
            fontColor: '#000', filter: function(item,line1Chart) {
                return item.datasetIndex !== 1 && item.datasetIndex !== 0;

            }
          },
        },
        elements: {
          line: {
            tension: 0, //disables bezier curves
          }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              callback: function(value, index, values) {
                return value + " people"
              }
            }

          }]
        },
        /*animation: {
            duration:0, // general animation time
        },*/
        hover: {
          animationDuration: 0, // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0, // animation duration after a resize
      }
    });


  [1]: https://i.stack.imgur.com/iOwhF.png

标签： javascriptchart.js