在折线图js上绘制边框

Question

我正在使用 ChartJS 创建包含元素的折线图。我想知道是否可以在元素的左侧和右侧设置边框？这是我的图表，如果你有两个相邻的元素并且它们具有相同的颜色，它会变得混乱。

我在文档中找不到任何支持它的东西，所以我认为我必须自己使用 js 绘制它，但我希望有人先给出解决方案:)
如果我必须自己绘制它，我会运行遇到一个问题，因为由于时间轴 (X)，每个元素都可以有不同的宽度。您有什么想法可以解决这个问题？

更新

图表中的每个元素都是一个新的数据集，并获得一个渐变对象作为背景颜色，填充设置为真。这是我将新数据集推入图表的示例

chart.data.datasets.push({
                fill: true,
                backgroundColor: gradient,
                data: [
                {
                    x: aIstartX,
                    y: yAxis_value,
                    .. Other attributes
                },
                {
                    x: newEntryXend,
                    y: yAxis_value,
                    ..Other attributes
                }]
            });

xAxes: [
                        {
                            stacked: false,
                            type: 'time',
                            unit: 'minute',
                            position: 'bottom',
                            scaleLabel: {
                                display: true
                            },
                            time: {
                                displayFormats: {
                                    'minute': 'mm:ss'
                                }
                            },
                            ticks: {
                                autoSkip: true,
                                beginAtZero: true,
                                stepSize: 2,
                                autoSkipPadding: 5,
                                padding: 10,
                                labelOffset: 5,
                            },
                            gridLines: {
                                display: false,
                                tickMarkLength: 20
                            },
                        }
                        ]

这是我的问题fiddle

https://jsfiddle.net/fa8hvhtv/1/

Answer 1

任何您想为 ,

保持相同背景颜色的原因

为什么你不能尝试如下

Demo

fill: true,
backgroundColor: 'red',

Answer 2

我找到了解决问题的办法。问题是我试图在我的数据集之间创建一些 space 并且我的数据属性 Y 不从 0 开始和结束。因此我在每个数据集中添加了两个额外的数据点，其 borderWidth 为 3，borderColor 与 backgroundColor 匹配的图表。每个额外添加的数据点都会有一个值为 0 的 Y。下面是向我的图表添加数据集的示例。

chart.data.datasets.push({
            fill: true,
            backgroundColor: gradient,
            borderWidth: 3,
            borderColor: '#333',
            data: [
            {
                x: startXvalue,
                y: 0
            },
            {
                x: startXvalue,
                y: startY,
                .. Other attributes
            },
            {
                x: newEntryXend,
                y: endY,
                .. Other attributes
            },
            {
                x: newEntryXend,
                y : 0
            }]
        });

在折线图js上绘制边框

Draw borders on line chartjs

chart.js

chartjs-2.6.0