Question

我想创建一个包含多行的图形，问题是代码会覆盖它创建的上一个行图，我将x和y轴值作为函数调用传递给代码，逻辑上它应该设置x轴只需一次并将数据添加到y（数据集中的数据）轴，以便在图形中有多条线

静态代码在折线图中有多行

var config = 
        {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],   //dates populated
                datasets: [{
                    label: "My First dataset",      //Name of reporting employee
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [
                            randomScalingFactor(),  //Add Datapoints(overall rating)
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor(), 
                            randomScalingFactor()
                         ],
                    fill: false,
                    --------
                }, {
                    label: "My Second dataset",
                    fill: false,
                    backgroundColor: window.chartColors.blue,
                    borderColor: window.chartColors.blue,
                    data: [
                        randomScalingFactor(),      
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor(), 
                        randomScalingFactor()
                    ],
                }]
            },

下面是我的代码，它尝试对动态传递的数据进行上述工作，动态性质导致我前面提到的问题，

var config = 
            {
                type: 'line',
                data: {
                    labels:col_dates,   //dates populated
                    datasets: [{
                        label:Name,     //Name of reporting employee
                        backgroundColor:'#00FFFF',
                        borderColor: '#00FFFF',
                        data:O_ratings,
                        fill: false,
                    }]
                },
                options: {
                    responsive: true,
                    //animation: false,
                    title:{
                        display:true,
                        text:'Ratings Chart'
                    },
                    tooltips: {
                        mode: 'index',              //Populate the entire datalist here
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: false
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Dates'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Value'
                            }
                        }]
                    }
                }
            };




ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);

我使用了两个数组col_dates（设置为X轴）和O-ratings（设置为Y轴）

Answer 1

所以我没有足够的声誉点来实际评论这个问题。尝试删除背景颜色属性。第一个数据集中的数据可能大于第二个数据集中的数据。我最近使用php完成了一个动态多线图。我的图表配置如下：

var lineChartData = {  //chart config options
    labels : [<?php echo '"'.$labelArray.'"'; ?>],
    datasets : [<?php echo $dataString; ?>],
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, {
    type:"line",
    fill: false,
    data:lineChartData,
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    autoSkip : true,
                    min: 2,
                    maxTicksLimit: 10
                }
            }]
        },
    },
    responsive:true
});

$dataString是我传递从外部网址检索的所有数据的变量

$dataString = $dataString."{label : '$name','fill' : 'false', data : [$br_values], borderColor : '$color', backgroundColor : 'transparent' },";

如果我错过任何事情，请告诉我，对不起，我没有尽快回答这个问题，我在2天前解决了这个问题。有关Chart.js的更多文档，请转到here

奖励

如何在chart.js中创建动态多线图表

1 个答案: