Question

我使用以下代码显示我的chart.js库图表：

HTML部分：

<div style="width:60%">
<div>
    <canvas id="canvas_all" height="450" width="600"></canvas>
</div>

和脚本：

    var lineChartDataAll = {
        labels : <?php echo json_encode($all_date_label) ?>,
        datasets : [
            {
                label: "My First dataset",
                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 : <?php echo json_encode($all_hum_data) ?>
            },
            {
                label: "My Second dataset",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : <?php echo json_encode($all_temp_data) ?>
            }
        ]

    }


window.onload = function(){

    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });

    var ctx_all = document.getElementById("canvas_all").getContext("2d");
    window.myLine = new Chart(ctx_all).Line(lineChartDataAll, {
        responsive: true,
        showXLabels: 10
    });
}

现在，我对此选项有疑问：showXLabels：10

我是否以正确的方式使用此选项？

我希望x轴上只有一个视图x（10）标签......这就是目标。

现在图表显示所有x标签......

Answer 1

（问题）评论中引用的选项来自尚未合并到主分支的PR 521。后来这被制成了PR 897，它还没有被合并。

因此，如果您需要此功能，则应使用上述任一代码。

这是一个小提琴 - http://jsfiddle.net/trhcafut/就是这么做的。我刚刚在PR的Chart.Core和Chart.Line之后添加了下面的代码块（只是滚动到JS块的最后）。

var lineChartData = {
    labels : ["January", "February", "March", "April", "May", "June", "July"],
    datasets : [
        {
            label: "My First dataset",
            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 : [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor : "rgba(151,187,205,0.2)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [28, 48, 40, 19, 86, 27, 90]
        }
    ]
}

var ctx_all = $("#canvas_all").get(0).getContext("2d");
window.myLine = new Chart(ctx_all).Line(lineChartData, {
    showXLabels: 3
});

请注意，如果您执行此操作，您将无法在分支后获得对Chart.js所做的任何更改。

如何正确地向chartjs添加简单选项

1 个答案: