Chartist.js 圖表神器

Question

這個神器的原因是什么？ 我已經從我的 codepen https://codepen.io/mads10000/pen/vaBdBd移動了我的代碼

<div class="chartsContainer">
  <div class="slaChart">
  </div>
</div>

到我的 HTML 樣板Github - 提交帶有工件的圖表

它不應該有圖像上看到的這些黑點。 它在我的代碼筆上看起來不錯。

Answer 1

解決方案是，showLine: false，修復它。

var lineChart = new Chartist.Line('.slaChart', {
    labels: ['January', '', 'February', '', 'March'],
    series: [
        // [0, 5, 8, 10, 7, 6, 5, 5, 4],
        [0, 50, 35, 70, 50, 90],
        [0 , 45, 25, 55, 35, 70]
    ]
}, {
    low: 0,
    high: 100,
    showArea: true,
    showLine: false, <-------- showLine false fixed it
    showPoint: false,
    fullWidth: true,
    plugins: [
        // Chartist.plugins.lineSelector()
    ],
    axisY: {
        onlyInteger: true,
        offset: 20
    },
    axisX: { showGrid: false }
});

Answer 2

這是由於 CSS 填充屬性造成的。 您頁面上的某些內容可能已將默認填充設置為黑色。 對於線條路徑，填充沒有意義清除它，您只需要將填充重置為無。

.ct-line {
  fill: none
}