Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - Thêm vòng lặp for/vòng lặp foreach vào Charts.js

In lại Tác giả: Walker 123 更新时间：2023-11-28 15:06:58 26 4
mua khóa gpt4 Nike

我尝试在下面的代码中添加 foreach 或 for 循环，以便为 Charts.js 创建多个数据集。这将允许我在此折线图上创建多条线。

我有一个 PHP 对象，我可以对其进行编码以稍后填充变量，但是如何以及在哪里注入(inject)循环以仅创建多个数据集？


var chart1Handler = function() {
dữ liệu var = {
    labels: {!! json_encode($month_array) !!},
    bộ dữ liệu: [{
            label:'',
            fillColor: 'rgba(220,220,220,0.2)',
            strokeColor: 'rgba(220,220,220,1)',
            pointColor: 'rgba(220,220,220,1)',
            pointStrokeColor: '#fff',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(220,220,220,1)',
            data: {{ json_encode($new_taco) }}
    }]
};

var options = {

    maintainAspectRatio: false,

    // Sets the chart to be responsive
    responsive: true,

    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines: true,

    //String - Colour of the grid lines
    scaleGridLineColor: 'rgba(0,0,0,.05)',

    //Number - Width of the grid lines
    scaleGridLineWidth: 1,

    //Boolean - Whether the line is curved between points
    bezierCurve: false,

    //Number - Tension of the bezier curve between points
    bezierCurveTension: 0.4,

    //Boolean - Whether to show a dot for each point
    pointDot: true,

    //Number - Radius of each point dot in pixels
    pointDotRadius: 4,

    //Number - Pixel width of point dot stroke
    pointDotStrokeWidth: 1,

    //Number - amount extra to add to the radius to cater for hit detection outside the drawn point
    pointHitDetectionRadius: 20,

    //Boolean - Whether to show a stroke for datasets
    datasetStroke: true,

    //Number - Pixel width of dataset stroke
    datasetStrokeWidth: 2,

    //Boolean - Whether to fill the dataset with a colour
    datasetFill: true,

    // Function - on animation progress
    onAnimationProgress: function() {
    },

    // Function - on animation complete
    onAnimationComplete: function() {
    },

    //String - A legend template
    legendTemplate: '
    <% for (var i=0; i
  • <%if(datasets[i].label){%><%=datasets[i].label%><%}%>
    • <%}%>
'
};
// Get context with jQuery - using jQuery's .get() method.
var ctx = $("#chart1").get(0).getContext("2d");
// This will get the first returned node in the jQuery collection.
var chart1 = new Chart(ctx).Line(data, options);
//generate the legend
var legend = chart1.generateLegend();
//and append it to your page somewhere
$('#chart1Legend').append(legend);

};


câu trả lời hay nhất

您可以在 PHP 代码中创建数据集数组并将其作为 json 传递给 JS。然后您只需要在使用之前对其进行解析即可。

在 PHP 中:

$datasets = [
    [
        'label'=>'',
        'fillColor'=> 'rgba(220,220,220,0.2)',
        'strokeColor'=> 'rgba(220,220,220,1)',
        'pointColor'=> 'rgba(220,220,220,1)',
        'pointStrokeColor'=> '#fff',
        'pointHighlightFill'=> '#fff',
        'pointHighlightStroke'=> 'rgba(220,220,220,1)',
        'data' => [1,2,3]
    ],
    [
        'label'=>'',
        'fillColor'=> 'rgba(220,220,220,0.2)',
        'strokeColor'=> 'rgba(220,220,220,1)',
        'pointColor'=> 'rgba(220,220,220,1)',
        'pointStrokeColor'=> '#fff',
        'pointHighlightFill'=> '#fff',
        'pointHighlightStroke'=> 'rgba(220,220,220,1)',
        'data' => [1,2,3]
    ]
];
$datasets = json_encode($datasets);

在 JS 中:

dữ liệu var = {
    labels: {!! json_encode($month_array) !!},
    datasets: JSON.parse('')
};

顺便说一句，我认为值得一提的是，JS 数组的处理方式与 JSON 字符串不同，尽管它们看起来非常相似。因此，尽管我没有看到太多实现细节，但我认为您需要传递一个数组而不是 JSON 作为 labels 的值。您也可以使用与此处的数据集相同的方法。

关于javascript - 为 Charts.js 添加 for 循环/foreach 循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38488121/

26 4 0
Đề xuất bài viết: javascript - 从匿名 JavaScript 函数访问变量
Đề xuất bài viết: html - 两个 div 的样式滚动不同
Đề xuất bài viết: html - 如何让带有 3 个链接的小菜单在标题内响应？
Đề xuất bài viết: css - 填充外部导入的 svg 文件
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress