JsChart图例中的多个标签

Question

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

现在我每个数据集有 1 个日期标签。太多了。

Example Image

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;

Answer 1

尝试使用http://www.highcharts.com/ 配置会好很多。

Answer 2

This Post helped alot

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