Chart.js折线图点线性渐变样式失效问题求助

你的代码里有几个关键问题导致数据点显示黑色，下面是修复方案：

问题分析 #

1. 自定义点样式的坐标获取错误：你用了context.p0，但自定义pointStyle的回调参数里，点的坐标是context.x和context.y，p0是线段起点，不是点的位置。
2. 渐变使用了画布全局坐标：你创建的渐变是基于整个画布的，不是数据点自身的局部区域，导致渐变无法正确显示在点内。
3. 渐变颜色未匹配需求：你用的是默认的蓝白和红白渐变，不是你要求的黄红、红棕渐变。
4. 点半径不一致：配置里设了pointRadius:13，但自定义样式里用了6，显示大小不统一。

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
  <div>
    <canvas id="myChart" width="400" height="200"></canvas>
  </div>
</body>
</html>

JavaScript部分 #

var trendPriceArray = [
  0, 109119, 103610, 112561, 0, 0, 0, 101852, 0, 99736, 134382, 110018
];

var trendPercentArray = [-5, 8.6, -9.5, -2.1, 34.7, -18.1];
var monthLabels = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];

// 过滤数据，同时修正百分比标签的索引对应问题
var filteredData = [];
var percentIndex = 0;
for (var i = 0; i < trendPriceArray.length; i++) {
  if (trendPriceArray[i] !== 0) {
    filteredData.push({
      x: monthLabels[i],
      y: trendPriceArray[i],
      label: trendPercentArray[percentIndex++] + '%',
    });
  }
}

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: monthLabels,
    datasets: [{
      label: 'Price Trend',
      data: filteredData,
      fill: false,
      borderColor: '#4e4e4e',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderWidth: 1,
      pointRadius: 13,
      pointHoverRadius: 13,
      pointStyle: [] // 后续填充自定义样式
    }]
  },
  options: {
    scales: {
      x: {
        type: 'category',
        title: {
          display: true,
          text: 'Month',
          font: { family: 'Montserrat' },
          color: '#4e4e4e'
        },
        ticks: {
          font: { family: 'Montserrat' },
          color: '#4e4e4e'
        }
      },
      y: {
        display: true,
        title: {
          display: true,
          text: 'Price',
          marginBottom: '10px',
          font: { family: 'Montserrat' },
          color: '#4e4e4e'
        },
        ticks: {
          font: { family: 'Montserrat' },
          color: '#4e4e4e'
        }
      }
    },
    plugins: {
      tooltip: { enabled: true, mode: 'index', intersect: false },
      legend: {
        labels: {
          font: { family: 'Montserrat' },
          color: '#4e4e4e'
        }
      }
    }
  }
});

// 创建默认黄红线性渐变（适配单个点）
function createDefaultGradient(pointX, pointY, radius) {
  // 对应243.46deg的渐变方向，换算成画布坐标是从右上到左下
  const gradient = ctx.createLinearGradient(
    pointX + radius * Math.cos((243.46 * Math.PI)/180),
    pointY + radius * Math.sin((243.46 * Math.PI)/180),
    pointX - radius * Math.cos((243.46 * Math.PI)/180),
    pointY - radius * Math.sin((243.46 * Math.PI)/180)
  );
  gradient.addColorStop(-0.01, '#FFC700'); // -1%对应0.01的偏移
  gradient.addColorStop(1.3166, '#F52525'); // 131.66%对应1.3166的偏移
  return gradient;
}

// 创建下跌时的红棕线性渐变（适配单个点）
function createRedGradient(pointX, pointY, radius) {
  // 对应55.98deg的渐变方向，换算成画布坐标是从左上到右下
  const gradient = ctx.createLinearGradient(
    pointX + radius * Math.cos((55.98 * Math.PI)/180),
    pointY + radius * Math.sin((55.98 * Math.PI)/180),
    pointX - radius * Math.cos((55.98 * Math.PI)/180),
    pointY - radius * Math.sin((55.98 * Math.PI)/180)
  );
  gradient.addColorStop(0.1173, '#E83C3C'); // 11.73%对应0.1173
  gradient.addColorStop(0.7251, '#9D3C3C'); // 72.51%对应0.7251
  return gradient;
}

// 生成自定义点样式函数
function createGradientPointStyle(isDownTrend) {
  return function(context) {
    const { x, y, radius } = context;
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    
    // 根据趋势创建对应渐变
    const gradient = isDownTrend 
      ? createRedGradient(x, y, radius) 
      : createDefaultGradient(x, y, radius);
    ctx.fillStyle = gradient;
    ctx.fill();
    // 保留原边框颜色
    ctx.strokeStyle = '#4e4e4e';
    ctx.lineWidth = 1;
    ctx.stroke();
    
    ctx.restore();
  };
}

// 为每个点设置样式
for (var i = 0; i < filteredData.length; i++) {
  // 判断：如果后一个数值小于当前，当前点使用下跌渐变
  const isDownTrend = i < filteredData.length - 1 && filteredData[i+1].y < filteredData[i].y;
  myChart.data.datasets[0].pointStyle.push(createGradientPointStyle(isDownTrend));
}

myChart.update();

关键修复点说明 #

• 局部渐变创建：根据每个点的坐标和半径，创建适配圆形的线性渐变，方向完全匹配你要求的角度。
• 正确获取点坐标：使用context.x和context.y获取当前点的位置，context.radius获取配置的点半径。
• 匹配需求颜色：严格按照你给出的渐变角度和颜色值设置渐变停止点。
• 修正百分比标签索引：过滤数据时同步递增百分比数组的索引，避免标签对应错误。
• 统一点半径：自定义样式里使用配置的radius，保持显示大小一致。

内容的提问来源于stack exchange，提问作者Toma