1

对不起，我的英语不好。

将 chart.js 从 2.8.0 更新到 3.4.1 后，我在图表区域看到了奇怪的“填充”（左右）（请看截图）。

填充.

在 Samples 的官方网站上，您可以看到没有任何填充的折线图。但我在条形图示例中看到了它（可能是条形图的某些设置可以生效？）。

这是图表配置、图表实例化、插件和带有样式的模板的代码：

// chart options
chartOptions = {
        type: "line",
        data: {
            datasets: [],
        },
        options: {
            elements: {
                point: { radius: 0 },
                line: { tension: 0, borderWidth: 1 }
            },
            animation: false,
            resizeDelay: 100,
            responsive: true,
            maintainAspectRatio: true,
            legend: { display: false },
            tooltips: {
                mode: 'nearest',
                intersect: false,
                callbacks: {label: (item, data) => this.onLabel(item, data)}
            },
            hover: {
                mode: 'nearest',
                intersect: false,
            },
            scales: {
                x: {
                    offset: true,
                    stacked: true,
                    type: 'time',
                    time: {
                        tooltipFormat: 'DD MMMM YYYY HH:mm:ss',
                        displayFormats: {
                            millisecond: 'HH:mm:ss.SSS',
                            second: 'HH:mm:ss',
                            minute: 'HH:mm',
                            hour: 'HH:mm',
                            day: 'DD MMM',
                        },
                    },
                    ticks: {
                        major: {
                            enabled: true,
                            fontStyle: 'bold',
                            fontColor: 'rgb(54, 143, 3)'
                        },
                        sampleSize: 10,
                        maxRotation: 30,
                        minRotation: 30,
                        min: undefined,
                        max: undefined,
                    },
                    afterFit: (scale) => {
                        scale.height = 40;
                    }
                },
                A: {
                    id: 'A',
                    type: 'linear',
                    position: 'left',
                    display: 'auto',
                    ticks: {
                        backdropPadding: 0,
                    },
                },
                B: {
                    id: 'B',
                    type: 'linear',
                    position: 'right',
                    display: 'auto',
                    ticks: {
                        max: 2,
                        min: -1,
                        stepSize: 1,
                        suggestedMin: 0,
                        suggestedMax: 1,
                    },
                },
            },
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                        mode: 'xy',
                        overScaleMode: 'y',
                        rangeMax: {x: new Date()},
                        onPanComplete: chart => this.onZoom(chart, false)
                    },
                    zoom: {
                        wheel: {
                            enabled: true,
                        },
                        mode: 'xy',
                        overScaleMode: 'y',
                        onZoomComplete: chart => this.onZoom(chart, true)
                    }
                }
            },
        },
    } as Chart.ChartConfiguration<'line'>;

// call of Chart#register()
import zoomPlugin from 'chartjs-plugin-zoom';
Chart.Chart.register(
    Chart.TimeScale, Chart.LinearScale, Chart.LineController,
    Chart.PointElement, Chart.LineElement, zoomPlugin,
);

// chart instantiating
this.chart = new Chart.Chart<'line'>(this.chartContainer.nativeElement, this.chartOptions);

模板

<div class="chart-wrapper">
    <canvas #chart_container id="chart"></canvas>
</div>

风格

.chart-wrapper {
    width: 99%;
    height: calc(100% - 7px);
    margin: 0 auto;
    overflow: hidden;
}

我尝试了什么：

  1. 检查数据和数据集；
  2. 禁用 chartjs-zoom-plugin；
  3. 设置options.layout.padding为 0；
  4. 设置options.responsive为false;
  5. 设置data.datasets.borderWidth为 1；

我怎样才能删除这个“填充”？

4

1 回答 1

1

此行为来自offset选项，此选项在比例中，因此条不会在网格线上呈现，但它们在它们之间很好地显示。正如文档所述，条形图自动将此选项设置为 true，而默认情况下为 false：https ://www.chartjs.org/docs/master/axes/cartesian/#common-options-to-all-cartesian-axes

您可以手动将其覆盖为 false，但是该图表中的第一个和最后一个条形将看起来很奇怪，因为它们以半宽呈现：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'red',
        backgroundColor: 'red'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        type: 'bar',
        backgroundColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      x: {
        offset: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
</body>

于 2021-07-05T21:37:21.627 回答