JsChart在图例中有多个标签

JsChart multiple labels in legend

本文关键字:标签 JsChart      更新时间:2023-09-26

我使用JSChart来制作一个简单的时间图。我没有在他们的文档中找到任何信息来设置时间标签的数量。我只想每天出现一次。最好在午夜。

现在我得到每个数据集1个日期标签。这太过分了。

示例图片JS函数初始化图表

_j(function () {
    /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */

    var graphData = $graph_data;
    var graphLabels = $graph_labels;

    var lineChartData = {
        labels: graphLabels,
        datasets: [
            {
                label: "Count",
                fillColor: "rgba(210, 214, 222, 1)",
                strokeColor: "rgb(60, 141, 188)",
                pointColor: "rgba(210, 214, 222, 1)",
                pointStrokeColor: "#c1c7d1",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: graphData
            },
            {
                label: "Call",
                fillColor: "rgba(60,141,188,0.9)",
                strokeColor: "rgba(255,0,0,0.8)",
                pointColor: "#3b8bba",
                pointStrokeColor: "rgba(60,141,188,1)",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(60,141,188,1)",
                data: [28, 50, 50, 50, 50, 50, 90]
            }
        ]
    };

    var lineChartOptions = {
        //Boolean - If we should show the scale at all
        showScale: true,
        //Boolean - Whether grid lines are shown across the chart
        scaleShowGridLines: false,
        //String - Colour of the grid lines
        scaleGridLineColor: "rgba(0,0,0,.05)",
        //Number - Width of the grid lines
        scaleGridLineWidth: 1,
        //Boolean - Whether to show horizontal lines (except X axis)
        scaleShowHorizontalLines: true,
        //Boolean - Whether to show vertical lines (except Y axis)
        scaleShowVerticalLines: true,
        //Boolean - Whether the line is curved between points
        bezierCurve: true,
        //Number - Tension of the bezier curve between points
        bezierCurveTension: 0.3,
        //Boolean - Whether to show a dot for each point
        pointDot: false,
        //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 color
        datasetFill: false,
        //String - A legend template
        // legendTemplate: "<ul class='<%=name.toLowerCase()%>-legend'><% for (var i=0; i<datasets.length; i++){%><li><span style='background-color:<%=datasets[i].lineColor%>'></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
        //Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
        maintainAspectRatio: true,
        //Boolean - whether to make the chart responsive to window resizing
        responsive: true,
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        'millisecond': 'MMM DD',
                        'second': 'MMM DD',
                        'minute': 'MMM DD',
                        'hour': 'MMM DD',
                        'day': 'MMM DD',
                        'week': 'MMM DD',
                        'month': 'MMM DD',
                        'quarter': 'MMM DD',
                        'year': 'MMM DD'
                    }
                }
            }]
        }
    };
    //-------------
    //- LINE CHART -
    //--------------
    var lineChartCanvas = document.getElementById("$chartID").getContext("2d");
    var lineChart = new Chart(lineChartCanvas);
    lineChart.Line(lineChartData, lineChartOptions);

});

PHP调用上面的模板。

 $graphTitle = "GRAPH API";
$chartID = "lineChartAPI";

$graph_data = json_encode($graph_data);
//reverse Reihenfolge der Labels
$graph_labels = json_encode($graph_labels);
eval(get_template("start_stat_graph"));
$data = $tpl;

尝试使用http://www.highcharts.com/,它在配置中要好得多。

这篇文章帮了很多忙

因此,对于少数x轴图例条目的解决方案只是操作数据,并且仅使用简单的%5 if语句设置例如每5个数据。