时间戳

首页 > 解决方案 > 如何在不通过折线图上的点的情况下构建垂直线？（图表.js）

javascript - 如何在不通过折线图上的点的情况下构建垂直线？（图表.js）

问题描述

嘿伙计们，我已经创建了一个几乎完成的折线图。唯一让我烦恼的是图表右侧有一些空白区域。我想创建一条不通过点的垂直线。它应该是一条平滑的线，不影响折线图末端的点

在此处输入图像描述

[<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>

<canvas id="mychart2" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById("mychart2");
  var ctx = canvas.getContext('2d');
  const decimals = 0;var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    originalLineDraw.apply(this, arguments);

    var chart = this.chart;
    var ctx = chart.chart.ctx;

    var index = chart.config.data.lineAtIndex;
    if (index) {
      var xaxis = chart.scales\['x-axis-0'\];
      var yaxis = chart.scales\['y-axis-0'\];

      ctx.save();
      ctx.beginPath();
      ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top);
      ctx.strokeStyle = '#F6F6F6';
      ctx.lineWidth = 1;
      ctx.borderDashOffset = 0.0;
      ctx.color = 'rgba(0, 0, 0, 1)';
      ctx.zeroLineColor = "rgba(0, 0, 0, 0.25)";
      ctx.tickMarkLength = 10;
      ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  }
});

  var config = { //configure the chart
    type: 'line',
    data: {
      labels: \['0', '1', '2', '3', '4', '5', '6', '7', '8', '9+'\],
      datasets: \[{
          label: "25th Percentile",
          showInLegend: false,
          backgroundColor: '#c4c1ff',
          pointBackgroundColor: "#645bff",
          borderColor: '#645bff',
          fill: 4,
          pointRadius: 0,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3, //no fill here
          data: \[28, 35, 40, 45, 50, 55, 62, 66, 70, 78\]
        }, {
          label: "90th Percentile",
          backgroundColor: '#c4c1ff',
          pointBackgroundColor: "#c4c1ff",
          borderColor: '#c4c1ff',
          pointHoverBackgroundColor: "#c4c1ff",
          pointHoverBorderColor: "#c4c1ff",
          borderWidth: 1,
          pointRadius: 0,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          fill: 3,
          //no fill here
          data: \[40, 65, 63, 64, 72, 79, 83, 87, 100, 108\]
        }, {
          label: "Median",
          backgroundColor: '#0d0e25',
          pointBackgroundColor: "#0d0e25",
          borderColor: '#0d0e25',
          borderWidth: 1,
          pointRadius: 2,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          fill: false, //no fill here
          data: \[30, 40, 45, 50, 56, 60, 66, 73, 78, 85\]
        },
        {
          label: "25th - 75th Percentile",
          showInLegend: false,
          backgroundColor: '#645bff',
          pointBackgroundColor: "#645bff",
          borderColor: '#645bff',
          pointRadius: 0,
          lineTension: 0.5,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          borderCapStyle: 'butt',
          borderDash: \[\],
          borderDashOffset: 0.1,
          borderJoinStyle: 'miter',
          fill: 0,
          //fill until previous dataset
          data: \[35, 50, 51, 55, 63, 69, 73, 80, 85, 94\]
        }, {
          label: "10th Percentile",
          backgroundColor: "#c4c1ff",
          pointBackgroundColor: "#c4c1ff",
          pointHoverBackgroundColor: "#c4c1ff",
          pointHoverBorderColor: "#c4c1ff",
          borderColor: "#c4c1ff",
          pointStyle: "circle",
          borderWidth: 1,
          lineWidth: 1,
          hoverRadius: 9,
          pointRadius: 0,
          pointBorderWidth: 3,
          pointHoverRadius: 3,
          pointHitRadius: 3,
          lineTension: 0.3,

          fill: '0', //fill until previous dataset
          data: \[25, 30, 36, 39, 45, 49, 53, 56, 60, 68\]
        }
      \], lineAtIndex: 9
    },
    options: {
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var label = data.datasets\[tooltipItem.datasetIndex\].label || '';
            if (label) {
              label += ': ';
            }
            if (label === "25th - 75th Percentile: ") {
              label = "75th Percentile: "
            }
            label += tooltipItem.yLabel
            return label;
          }
        }
      },
      title: {
        display: true,
        text: 'Frontend Engineer salaries (753 datapoints)',
        fontSize: 20
      },
      maintainAspectRatio: false,
      legend: {
        onClick: (e) => e.stopPropagation(),
        display: true,
        labels: {
          filter: function(item,
            mychart2) {
            return !item.text.includes("25th Percentile" & "10th Percentile")
          }
        }
      },
      spanGaps: false,
      elements: {
        line: {
          tension: 0.1
        }
      },
      plugins: {
        filler: {
          propagate: false
        }
      },
      scales: {
        yAxes: \[{
          gridLines: {drawOnChartArea:false
            
          },
          scaleLabel: {
            display: true,
            labelString: 'Salary',
            fontSize: 20
          },
          ticks: {
            beginAtZero: true,
            stepSize: 20,
            callback: function(value, index, values) {
              return '$' + value.toFixed(decimals)
            }
          }
        }\],
        xAxes: \[{
          gridLines: {drawOnChartArea:false
          },
          ticks: {
            beginAtZero: true,
            stepSize: 20,

          },
          scaleLabel: {
            display: true,
            labelString: 'Years of relevant experience',
            fontSize: 20
          }
        }\]
      }
    }
  };
  var chart = new Chart(ctx, config)
  
  
</script>][1]

标签： javascriptchart.js

解决方案

垂直线应该如何？

你是说中线吗？

在此处输入图像描述

如果你能告诉我们你的意思是什么类型的垂直线，或者至少告诉我们一个函数，这样我们就知道这条线应该是什么样子了，这将是有帮助的

编辑：

您可以在右侧添加第二个 yAxis。将其替换为 yAxes：

       yAxes: [{
                id: 'a',
                type: 'linear',
                position: 'left',
                gridLines: {
                    drawOnChartArea:false
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Salary',
                    fontSize: 20
                },
                ticks: {
                    beginAtZero: true,
                    stepSize: 20,
                    callback: function(value, index, values) {
                        return '$' + value.toFixed(decimals)
                    }
                }
            }, {
                id: 'b',
                type: 'linear',
                position: 'right',
                gridLines: {
                    drawOnChartArea:false
                },
                scaleLabel: {
                    display: false
                },
                ticks: {
                    display: false,
                    beginAtZero: true,
                    stepSize: 1
                }
            }]

推荐阅读