Question

我对图表有疑问。当有6个值时，我可以看到绿线。但是只有三个结果时并非如此。我不明白，因为它可以与其他行很好地工作，并且配置似乎完全相同。

但是它在那里工作：

我的代码：

var ctx2 = document.getElementById("myChart2");

                //Global Options:
                Chart.defaults.global.defaultFontSize = 15;
                var data2 = [{{{ cote_2014_base }}}, {{{ cote_2015_base }}}, {{{ cote_2016_base }}}, {{{ cote_2017_base }}}, {{{ cote_2018_base }}}, {{{ cote_2019_base }}}];
                var dataExcp2 = [{{{ cote_2014_excp }}}, {{{ cote_2015_excp }}}, {{{ cote_2016_excp }}}, {{{ cote_2017_excp }}}, {{{ cote_2018_excp }}}, {{{ cote_2019_excp }}}];
                var dataConcours2 = [{{{ cote_2014_concours }}}, {{{ cote_2015_concours }}}, {{{ cote_2016_concours }}}, {{{ cote_2017_concours }}}, {{{ cote_2018_concours }}}, {{{ cote_2019_concours }}}];

                ...

                var myChart = new Chart(ctx2, {
                    type: 'line',
                    data: {
                        labels: ["2014", "2015", "2016", "2017", "2018", "2019"],
                        datasets: [
                            {
                                spangaps: true,
                                label: 'Exceptionnel',
                                data: dataExcp2,
                                backgroundColor: 'transparent',
                                borderColor: '#00C853',
                                borderWidth: 4,
                                pointWidth: 3,
                                pointRadius: 5,
                                pointHoverRadius: 6,
                                pointBorderColor: '#FFF',
                                pointBackgroundColor: '#00C853',
                                pointBorderWidth: 1,
                                pointHitRadius: 100,
                                datalabels: {
                                    display: false
                                }
                            },
                            {
                                spanGaps: true,
                                label: 'Concours',
                                data: dataConcours2,
                                backgroundColor: 'transparent',
                                borderColor: '#0091EA',
                                borderWidth: 4,
                                pointWidth: 3,
                                pointRadius: 5,
                                pointHoverRadius: 6,
                                pointBorderColor: '#FFF',
                                pointBackgroundColor: '#0091EA',
                                pointBorderWidth: 1,
                                pointHitRadius: 100,
                                datalabels: {
                                    display: false
                                },
                                hidden: true
                            },
                            {
                                spanGaps: true,
                                label: 'Très bon état',
                                data: data2,
                                backgroundColor: 'transparent',
                                borderColor: '#ffb200',
                                borderWidth: 5,
                                pointWidth: 3,
                                pointRadius: 5,
                                pointHoverRadius: 6,
                                pointBorderColor: '#FFF',
                                pointBackgroundColor: '#ffb200',
                                pointBorderWidth: 1,
                                pointHitRadius: 100,
                                datalabels: {
                                    display: 'auto',
                                    overlap: true,
                                    align: 'center',
                                    padding: 7,
                                    backgroundColor: '#ffb200',
                                    borderRadius: 50,
                                    color: 'white',
                                    font: {
                                        weight: 'bold'
                                    },
                                    formatter: function (value) {
                                        return value.toLocaleString() + ' €';
                                    }
                                }
                            },
                            ] ...
                    },

                    options: {
                        maintainAspectRatio: false,
                        responsive: true,
                        tooltips: {
                            enabled: true,
                            mode: 'index',
                            xPadding: 20,
                            yPadding: 20,
                            titleFontSize: 15,
                            titleMarginBottom: 10,
                            bodySpacing: 12,
                            caretPadding: 10,
                            callbacks: {
                                label: function (tooltipItem, data) {
                                    return ' ' + data.datasets[tooltipItem.datasetIndex].label + ': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString() + ' €';
                                }
                            }
                        },
                        legend: {
                            display: true,
                            position: 'bottom',
                            labels: {
                                padding: 15
                            }
                        },
                        scales: {
                            xAxes: [{
                                offset: true,
                                gridLines: {
                                    display: true
                                },
                                ticks: {
                                    fontStyle: 'bold'
                                }
                            }],
                            yAxes: [{
                                gridLines: {
                                    display: true
                                },
                                ticks: {
                                    beginAtZero: true,
                                    callback: function (value) {
                                        return value.toLocaleString() + " €";
                                    },
                                    suggestedMax: dataExcp[4] * 1.1,
                                    fontStyle: 'bold'
                                },
                                afterTickToLabelConversion: function (scaleInstance) {
                                    // set the first and last tick to null so it does not display
                                    // note, ticks[0] is the last tick and ticks[length - 1] is the first
                                    scaleInstance.ticks[0] = null;
                                    scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;

                                    // need to do the same thing for this similiar array which is used internally
                                    scaleInstance.ticksAsNumbers[0] = null;
                                    scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
                                }
                            }]
                        },
                    }
                });

我尝试了其他无效的方法。我真的不明白为什么它适用于其他生产线，而不适用于绿色生产线。对我来说，选项是绝对相同的。

当图表的一行上只有三个值时，没有边框颜色

0 个答案: