charsjs 以 2 倍的因子绘制第二个数据集，但数据是正确的

Question

我有一个图表JS，数据似乎在视觉上加倍，但在代码中却没有。

我正在使用 2.9.4，最初在示例中这似乎有效。所以我一定弄坏了什么东西。

我用

绘制了两个数据集

var dataSetBuilder = 
    [
        { 
                 data: Data,
                label: "Alternative data",
                
                //for dots.
                backgroundColor: 'lightgreen',
                borderColor: 'lightgreen',
                borderColor: 'blue',
                borderWidth: 2,
                fill: false
        },
        { 
                 data: DataAlt,
                label: "Preferred values",
                
                //for dots.
                backgroundColor: 'lightgreen',
                borderColor: 'lightgreen',
                borderColor: 'red',
                borderWidth: 2,
                fill: false
        }
    ]

我的结果是

任何人都可以看到数据是正确的，但它绘制了该值的 * 2。 我在这个项目中有很多代码，所以请让我知道我还可以添加什么，但这是图表功能。

var chart = 
    new Chart(document.getElementById("line-chart"), {
      type: 'line',
      data: {
        labels: labelData,
        datasets: dataSetBuilder
      },
      options: {
       tooltips: {
           custom: function(tooltip) {
            tooltip.displayColors = false;
          },
          callbacks: {
                label: function(tooltipItem, data) {
                            
                            return  "Degrees" + "( Frequency: " +  data.datasets[ tooltipItem.datasetIndex ].data[tooltipItem.index] + ")";
                    }
                }
            },
            maintainAspectRatio: false,
            title: {
              display: true,
              text: name,
               fontSize: 18,
               fontColor: "#600",
            },
            legend: {
                    labels: {
                        fontColor: "lightblue",
                        fontSize: 14
                    }
            },
            scales: {
              yAxes: [{
                ticks:{
                  min : 0,
                  stepSize : step,
                  fontColor : "#300",
                  fontSize : 14
                },
                gridLines:{
                  color: "#000",
                  lineWidth:2,
                  zeroLineColor :"#000",
                  zeroLineWidth : 2
                },
                stacked: true
              }],
              xAxes: [{
               // type: 'linear', 
                ticks:{
                 min : 0,
                  max : 60,
                 stepSize : 5,
                  fontColor : "#000",
                  fontSize : 14
                },
                gridLines:{
                  color: "#fff",
                  lineWidth:2
                }
              }]
            },
             events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'mousedown'],    
        },
        plugins: [{
        afterEvent(chart, args, opts) {
        ////args.x y
         var key = "";
            var divisions = 9;//this may change and maybe even per data. 
            var offset = chart.scales['x-axis-0'].getPixelForValue (.1);
            var currentX =   args.x  -  offset; //point we are at minus the offset
            var rangeX =  chart.scales['x-axis-0'].getPixelForValue (60)  - chart.scales['x-axis-0'].getPixelForValue (.1) 
            var divisionX = divisions;  
            var spaceX = rangeX / divisionX; //each point is this length
            var markerToLeft = currentX / spaceX;
            var leftTickX =  Math.floor(markerToLeft) 
            var rightTickX =  Math.floor(leftTickX+1) 
            var leftLabelX = chart.scales['x-axis-0'].getPixelForValue ( chart.data.labels[leftTickX] )  - offset;
            var rightLabelX = chart.scales['x-axis-0'].getPixelForValue ( chart.data.labels[rightTickX] ) - offset;
            var DistFromLeftWallX =   currentX- leftLabelX;
            
 
 
            var  pointVale = (currentX - leftLabelX) / (rightLabelX  - leftLabelX)  * ( chart.data.labels[rightTickX]  - parseInt(chart.data.labels[leftTickX])  )  + parseInt(chart.data.labels[leftTickX]) 
            
            pointVale = pointVale.toFixed(2);
            
            document.querySelector(".XYresult_A").textContent = 'Angle: ' +  pointVale 
            document.querySelector(".XYresult_F").textContent = ' Frequency:' +   Math.floor(chart.scales['y-axis-0'].getValueForPixel(args.y)) + '  At cursor'
            
            if ( isNaN (pointVale) ) {document.querySelector(".XYresult_A").textContent  = document.querySelector(".XYresult_F").textContent  = ""}  
             
        },
            beforeRender: (x, options) => {
            if (inDataAlt != undefined)
            {
            
            //find intersect point and point that pint in for the 200's
            

            
                const c = x.chart;
                const dataset = x.data.datasets[0];
                const yScale = x.scales['y-axis-0'];
                const xScale = x.scales['x-axis-0'];
                const yPos = yScale.getPixelForValue(0);
                var x_start= xScale.getPixelForValue(xScale._valueRange);
                var y_start=yScale.getPixelForValue(yScale._valueRange);
                var x_end=0;
                var y_end=0;
                
                
 
                 for (var d = 0; d < c.data.datasets[0].data.length; d++)
                 {
                    if (c.data.datasets[1].data[d] > c.data.datasets[0].data[d]) 
                    {
                        x_inter=xScale.getPixelForValue(c.data.labels[d] );
                        y_inter=yScale.getPixelForValue(c.data.datasets[1].data[0]);
                        break;
                    }
                 }
         
 
                const gradientFill1 = c.ctx.createLinearGradient( x_start, y_start, x_end, y_end);
                gradientFill1.addColorStop(0, "red"); gradientFill1.addColorStop(0.5, "red"); 
                gradientFill1.addColorStop(0.5, "blue"); gradientFill1.addColorStop(1, "blue");
                
                const gradientFill2 = c.ctx.createLinearGradient( x_start, y_start, x_end, y_end);
                gradientFill2.addColorStop(0, "blue"); gradientFill2.addColorStop(0.5, "blue"); 
                gradientFill2.addColorStop(0.5, "red"); gradientFill2.addColorStop(1, "red");
                
                const model2 = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;
                model2.borderColor = gradientFill1;
                         
                const model1 = x.data.datasets[1]._meta[Object.keys(dataset._meta)[0]].dataset._model;
                model1.borderColor = gradientFill2;
                
            }
          }
  
      }]
  
    });

Answer 1

在您的 yAxes 配置中设置

stacked: true

这意味着对于第一个数据集，它以 0 作为底部，但对于第二个数据集，它以第一个数据集作为底部。因此，如果 2 个数据集的第一个数据点为 10 和 5，则第一个数据集将在 10 处绘制它，第二个数据集将在 15 处绘制它上方的 5。

要解决此问题，您需要从配置中删除

stacked: true

，如下所示：

yAxes: [{
  ticks: {
    min: 0,
    stepSize: step,
    fontColor: "#300",
    fontSize: 14
  },
  gridLines: {
    color: "#000",
    lineWidth: 2,
    zeroLineColor: "#000",
    zeroLineWidth: 2
  }
}],