Chart.js 折线图点/图在动态数据中消失

问题描述

我使用的是 Chart.js 中的折线图，但对于某些可视化，绘制的点（显示坐标的点）正在消失。

上面的图表是点/图可见的地方。

下面的图表是上面没有显示图/点的图表。我需要这些图，因为有很多数据，如果没有这些点/图，就很难显示出来。

上图的代码是：

var AreaChart = new Chart(AreaCharts,{
        type: 'line',data: {
            labels: [],datasets: [{
                label: '1st',data: [],backgroundColor: '#f39233',borderColor: '#f39233',hoverBorderWidth: 2,hoverBorderColor: '#054564',fill: false,},{
                label: '2nd',backgroundColor: '#b8de6f',borderColor: '#b8de6f',}
            ]
        },options: {
            
            bezierCurve: false,scaleShowValues: true,scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }],xAxes: [{
                    ticks: {
                        autoSkip: true,padding: 10,fontSize: 10
                    }
                }]
            },responsive: true,maintainAspectRatio: false,title: {
                display: true,text: ''
            },});

图表的数据集是动态的。它在某些图表中表现良好，但在某些图表中却不尽如人意。

用于填充和更新图表的代码。

function fillChart() {
    var labelsChart = [];
    var chartData1 = [];
    var chartData2 = [];
    for (let i = 0; i < $scope.n; i++) {
       
        labelsChart.push($scope.dates[i]);
        chartData1.push($scope.p[i]);
        chartData2.push($scope.f[i]);
    }
    
    AreaChart.data.labels = labelsChart;
    AreaChart.data.datasets[0].data = chartData1;
    AreaChart.data.datasets[1].data = chartData2;
    AreaChart.options.title.text = data.Subject;
    AreaChart.update();
}

提前致谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）