MantisGraph.js line绘制趋势图

D:\workspace\php\mantis\plugins\MantisGraph\files\MantisGraph.js

$(document).ready( function() {
    $("canvas[id^='barchart']").each( function() {
        new Chart( $(this), {
            type: 'bar',
            data: {
                labels: $(this).data('labels'),
                datasets: [{
                    label: '# of issues',
                    data: $(this).data('values'),
                    backgroundColor: 'rgba(252, 189, 189, 0.2)',
                    borderColor: 'rgba(252, 189, 189, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    });

    $("canvas[id^='piechart']").each( function() {
        new Chart( $(this), {
            type: 'pie',
            data: {
                labels: $(this).data('labels'),
                datasets: [{
                    label: '# of issues',
                    data:  $(this).data('values'),
                    backgroundColor: $(this).data('background-colors'),
                    borderColor: $(this).data('border-colors'),
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    });

    $("canvas[id^='linebydate']").each( function() {
        var ctx = $(this).get(0).getContext("2d");
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: $(this).data('labels'),
                datasets: [
                    {
                        label: $(this).data('opened-label'),
                        backgroundColor: 'rgba(255, 158, 158, 0.5)',
                        data: $(this).data('opened-values')
                    },
                    {
                        label: $(this).data('resolved-label'),
                        backgroundColor: 'rgba(49, 196, 110, 0.5)',
                        data: $(this).data('resolved-values')
                    },
                    {
                        label: $(this).data('still-open-label'),
                        backgroundColor: 'rgba(255, 0, 0, 1)',
                        data: $(this).data('still-open-values')
                    },]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    });
});

 

<?php
            $t_metrics = create_cumulative_bydate();
            //var_dump($t_metrics);//exit();
            //graph_cumulative_bydate( $t_metrics );
    $t_labels = array_keys( $t_metrics[0] );
    $t_formatted_labels = array_map( function($label) { return date( 'Ymd', $label ); }, $t_labels );
    $t_js_labels = graph_strings_array( $t_formatted_labels );
    //var_dump($t_labels);
    //var_dump($t_formatted_labels);
    //var_dump($t_js_labels);
    //exit();
    $t_js_labels_QUOTES =htmlspecialchars( $t_js_labels, ENT_QUOTES );
    //var_dump($t_js_labels_QUOTES);
    //exit();

    $t_values = array_values( $t_metrics[0] );
    $t_opened_values = graph_numeric_array( $t_values );
    //var_dump($t_values);
    //var_dump($t_opened_values);
    //exit();    

    $t_values = array_values( $t_metrics[1] );
    $t_resolved_values = graph_numeric_array( $t_values );

    $t_values = array_values( $t_metrics[2] );
    $t_still_open_values = graph_numeric_array( $t_values );

    $t_colors = graph_status_colors_to_colors();
    $t_background_colors = graph_colors_to_rgbas( $t_colors, 0.2 );
    $t_border_colors = graph_colors_to_rgbas( $t_colors, 1 );

    $t_legend_opened = plugin_lang_get( 'legend_reported' );
    $t_legend_resolved = plugin_lang_get( 'legend_resolved' );
    $t_legend_still_open = plugin_lang_get( 'legend_still_open' );
    //var_dump($t_legend_opened);
    //var_dump($t_legend_resolved);
    //var_dump($t_legend_still_open);
    //exit();

?>
    <!--   id="linebydate2" width="500" height="400"
            data-labels=""
            data-opened-label=""
            data-opened-values=""
            data-resolved-label=""
            data-resolved-values=""
            data-still-open-label=""
            data-still-open-values="" -->
            
<canvas id="myChart" width="500" height="400"></canvas>    
<script>
var ctx = $("#myChart").get(0).getContext("2d");
new Chart(ctx, {
    type: 'line',
    data: {
        labels: [<?php echo  $t_js_labels ?>],
        datasets: [
            {
                label: '<?php echo $t_legend_opened ?>',
                backgroundColor: 'rgba(255, 158, 158, 0.5)',
                data: [<?php echo $t_opened_values ?>]
            },
            {
                label: '<?php echo $t_legend_resolved ?>',
                backgroundColor: 'rgba(49, 196, 110, 0.5)',
                data: [<?php echo $t_resolved_values ?>]
            },
            {
                label: '<?php echo $t_legend_still_open ?>',
                backgroundColor: 'rgba(255, 0, 0, 1)',
                data: [<?php echo $t_still_open_values ?>]
            },]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

</script>