chartj 模板不接受新数据集答案

【问题标题】：new dataset is not accepted by chartj templatechartj 模板不接受新数据集
【发布时间】：2021-10-20 06:06:23
【问题描述】：

我正在尝试在节点红色仪表板上绘制折线图。此模板使用 100 个随机生成的数据点创建所需的可滚动图表：

<style>.chartWrapper {
  position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: auto;
  overflow-x: scroll;
}
</style>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="351" width="4000"></canvas>
  </div>
  </div>
  <canvas id="axis-Test" height="351" width="0"></canvas>
</div>

<script>
    
$(document).ready(function () {

    function generateLabels() {
        var chartLabels = [];
        for (x = 0; x < 100; x++) {
            chartLabels.push(x);
        }
        return chartLabels;
    }

   function generateData() {
        var chartData = [];
        for (x = 0; x < 100; x++) {
            chartData.push(Math.floor((Math.random() * 100) + 1));
        }
        return chartData;
    }
    

    function addData(numData, chart) {
        for (var i = 0; i < numData; i++) {
            chart.data.datasets[0].data.push(Math.random() * 100);
            chart.data.labels.push("Label" + i);
            var newwidth = $('.chartAreaWrapper2').width() + 60;
            $('.chartAreaWrapper2').width(newwidth);
        }
    }

    var chartData = {
        labels: generateLabels(),
        datasets: [{
            label: "Test Data Set",
            data: generateData(),
            pointRadius: 0,
            borderColor: "#4ED7FC",
            borderWidth: 2,
            fill: false
        }]
    };



    $(function () {
        var rectangleSet = false;

        var canvasTest = $('#chart-Test');
        var chartTest = new Chart(canvasTest, {
            type: 'line',
            data: chartData,
            
            maintainAspectRatio: false,
            responsive: true,
            
        });
        addData(5, chartTest);
    });
});    
</script>

接下来，我想用进入仪表板模板节点的有效负载消息替换生成的数据点，其中msg.payload[0].data 是array[2500]。我想我可以通过替换generateData()来实现这一点：

<style>.chartWrapper {
  position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: auto;
  overflow-x: scroll;
}
</style>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="351" width="4000"></canvas>
  </div>
  </div>
  <canvas id="axis-Test" height="351" width="0"></canvas>
</div>

<script>
    
$(document).ready(function () {

    function generateLabels() {
        var chartLabels = [];
        for (x = 0; x < 100; x++) {
            chartLabels.push(x);
        }
        return chartLabels;
    }

    /*function generateData() {
        var chartData = [];
        for (x = 0; x < 100; x++) {
            chartData.push(Math.floor((Math.random() * 100) + 1));
        }
        return chartData;
    }*/
    function generateData(msg) {
        var chartData = [];
        chartData = msg.payload[0].data;        
        return chartData;
    }
    

    function addData(numData, chart) {
        for (var i = 0; i < numData; i++) {
            chart.data.datasets[0].data.push(Math.random() * 100);
            chart.data.labels.push("Label" + i);
            var newwidth = $('.chartAreaWrapper2').width() + 60;
            $('.chartAreaWrapper2').width(newwidth);
        }
    }

    var chartData = {
        labels: generateLabels(),
        datasets: [{
            label: "Test Data Set",
            data: generateData(),
            pointRadius: 0,
            borderColor: "#4ED7FC",
            borderWidth: 2,
            fill: false
        }]
    };



    $(function () {
        var rectangleSet = false;

        var canvasTest = $('#chart-Test');
        var chartTest = new Chart(canvasTest, {
            type: 'line',
            data: chartData,
            
            
            responsive: true,
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    titleFontSize: 0,
                    titleMarginBottom: 0,
                    bodyFontSize: 12
                },
                legend: {
                    display: false
                },
                scales: {
                    xAxes: [{
                        ticks: {
                            fontSize: 12,
                            display: false
                        }
                    }],
                    yAxes: [{
                        ticks: {
                            fontSize: 12,
                            beginAtZero: true
                        }
                    }]
                },
            }
        });
        addData(5, chartTest);
    });
});    
</script>

但是图表只是显示一个空白：

这是为什么呢？

[编辑]

传入的有效载荷不为空：

【问题讨论】：

请确认您在 array[2500] 和您使用的 charjs 版本中接收到值
当模板中的代码被执行时，浏览器中没有 msg 对象...您需要记住，模板所做的只是渲染一些文本，然后将这些文本发送到浏览器运行。
@hardlib 现在才理解您的评论。在节点的脚本部分找到解释如何获取 msg 对象的文档。将其发布为答案。

标签： javascript html css chart.js node-red

【解决方案1】：

我会尝试以下方法：

1.- 检查您的 array[2500] 的值是否介于 1 和 100 之间，并传入前 100 个而不是整个 2500 数组以检查是否有效

2.- 可能取决于chartjs 版本，但我会尝试将maintainAspectRatio 属性放在options: {} 对象中。见下文。

var chart = new Chart('blabla', {
  type: 'bar',
  data: {},
  options: {
    maintainAspectRatio: false,
  }
});

除此之外，2500 条记录似乎数据量太大而无法处理。如果图表呈现的数量较少，我会尝试保持绘制的图表数量是呈现的，并根据用户 x-scroll 获取数据 + 更新图表。

编辑：

我认为您需要为您的新数组调用 addData，并使用修改后的 addData 函数，看起来像这样，以适应宽度。

function addData(chart) {
    for (var i = 0; i < chart.data[0].data.length; i++) {
        //chart.data.datasets[0].data.push(Math.random() * 100);
        //chart.data.labels.push("Label" + i);
        var newwidth = $('.chartAreaWrapper2').width() + 60;
        $('.chartAreaWrapper2').width(newwidth);
    }
}

请注意，您的脚本会根据上述安排确定记录数，因此如果图表变为空白只能是您的新数组为空或有问题。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>.chartWrapper {
  position: relative;
}

.chartWrapper > canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.chartAreaWrapper {
  width: auto;
  overflow-x: scroll;
}
</style>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
  <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="300" width="1200"></canvas>
  </div>
  </div>
  <canvas id="axis-Test" height="300" width="0"></canvas>

<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <div class="chartAreaWrapper2">
      <canvas id="chart-Test" height="351" width="4000"></canvas>
    </div>
  </div>
  <canvas id="axis-Test" height="351" width="0"></canvas>
</div>

<script>
    
$(document).ready(function () {
    function generateLabels() {
        var chartLabels = [];
        for (x = 0; x < 100; x++) {
            chartLabels.push(x);
        }
        return chartLabels;
    }

   function generateData() {
        var chartData = [];
        for (x = 0; x < 100; x++) {
            chartData.push(Math.floor((Math.random() * 100) + 1));
        }
        return chartData;
    }
    
    function addData(numData, chart) {
        for (var i = 0; i < numData; i++) {
            chart.data.datasets[0].data.push(Math.random() * 100);
            chart.data.labels.push("Label" + i);
            var newwidth = $('.chartAreaWrapper2').width() + 60;
            $('.chartAreaWrapper2').width(newwidth);
        }
    }

    var chartData = {
        labels: generateLabels(),
        datasets: [{
            label: "Test Data Set",
            data: generateData(),
            pointRadius: 0,
            borderColor: "#4ED7FC",
            borderWidth: 2,
            fill: false
        }]
    };

    $(function () {
        var rectangleSet = false;
        var canvasTest = $('#chart-Test');
        var chartTest = new Chart(canvasTest, {
            type: 'line',
            data: chartData,
            options: {
                maintainAspectRatio: false,
                responsive: true
            }
        });
        addData(300, chartTest);
    });
});    
</script>

【讨论】：

我现在将 payload[0].data 加盖到 100 个条目。但它仍然显示一个空白图表。我还将maintainAspectRatio 也移到了选项中。我之前确实有一些奇怪的纵横比行为，所以这可能解决了这个问题。我还首先在generateData()（更新问题）中初始化了数组，但这也没有效果。我正在监督的模板中是否还有其他内容？还有addData()，我不明白它的目的，它似乎也生成随机数。问题可能出在其他地方吗？
addData 将数据推送到数据集数组中，并为推送到数组中的每条记录安排 chartAreaWrapper2 元素的宽度以适应图表。如果您放置断点或执行console.log()，您是否在payload[0].data 中有记录？
如果您要更改问题代码以进行数组替换，请发布无效的代码，而不是有效的代码。如果您使用的是问题中的那个，我认为您的数组可能是空的。查看更新的问题
刚刚编辑了问题以显示全新的（不工作的）代码
一秒。生病表明有效载荷也不为空

【解决方案2】：

我发现仪表板模板节点不容易接受脚本部分的有效负载消息。 watch function 我必须使用类似的东西：

// Watch the payload and update
(function(scope) {
    scope.$watch('msg.payload', function(data) {
        update(data);
    });
})(scope);

function update(dta) {
    theScope.send({payload:dta});
    bleh = dta.name;
    otherStuff();
}

观察传入的有效载荷并存储它。

我最初的问题“为什么会这样？”因此得到答复。不幸的是，在我的具体情况下，我不太确定如何在 msg.payload[0.data 中的数组中实现这一新代码。

【讨论】：