Question

我正在尝试制作一个包含多个线条和条形图的图表，但它们需要从0开始，它对于条形图而言工作正常，但不是一条线条。我尝试为数据集中的选项设置选项设置id，但nothings有效

这是我的代码：

            <canvas id="barLine" width="400" height="400"></canvas>

@section('js')
    @parent
    <script>
        var ctx = document.getElementById("barLine");
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['contacten', 'orders', 'logistiek'],
                datasets: [{
                    label: 'Aantal',
                    data: [5.3, 5.5, 5.7],
                    backgroundColor: colors,
                    borderColor: colors,
                    borderWidth: 1
                }, {
                    label: 'Aantal',
                    data: [5.7, 6.5, 6],
                    backgroundColor: colors,
                    borderColor: colors,
                    borderWidth: 1
                }, {
                    label: 'Aantal',
                    data: [7.8, 5, 7],
                    backgroundColor: colors,
                    borderColor: colors,
                    borderWidth: 1
                }, {
                    label: 'Target 2016',
                    data: [5.0, 5.0, 5.0],
                    type: 'line',
                    fill: false,
                    pointHitRadius: 10,
                    pointRadius: 0,
                    pointStyle: 'rect'
                }, {
                    label: 'Target 2017',
                    data: [7.5, 7.5, 7.5],
                    type: 'line',
                    fill: false,
                    pointHitRadius: 10,
                    pointRadius: 0,
                    pointStyle: 'rect'
                }, {
                    label: 'Target 2018',
                    data: [7, 7, 7],
                    type: 'line',
                    fill: false,
                    pointHitRadius: 10,
                    pointRadius: 0,
                    pointStyle: 'rect',
                    backgroundColor:'purple',
                    borderColor:'purple',
                    beginAtZero:true
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            max: 10,
                            min: 0
                        },
                        scaleLabel: {
                            display: true,
                            labelString: "Cijfer"
                        }
                    }]
                }
            }
        });
    </script>
@stop

所以它需要工作，线（目标2016 ......）需要从0开始。我可以让它只用一条线但是混合我不能这样做。

Answer 1

beginAtZero是ticks的一个属性，所以你需要将它放在ticks中，这是选项的一部分：

options:{
    scales:{
         yAxes:[{
             ticks:{
                 beginAtZero: true
             }
         }]
    }
}

beginAtZero无法处理混合图表

1 个答案: