在折线图js上绘制边框答案

【问题标题】：Draw borders on line chartjs在折线图js上绘制边框
【发布时间】：2018-01-26 19:03:16
【问题描述】：

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

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

更新

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

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
                            },
                        }
                        ]

这是我的问题的一个小提琴

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

【问题讨论】：

标签： chart.js chartjs-2.6.0

【解决方案1】：

您想为 , 保持相同背景颜色的任何原因，

为什么你不能尝试如下

Demo

fill: true,
backgroundColor: 'red',

【讨论】：

感谢您的回答。颜色具有价值，因此不可能为每个元素使用新颜色。

【解决方案2】：

我找到了解决问题的方法。问题是我试图在我的数据集和我的数据属性 Y 不以 0 开始和结束之间创建一些空间。因此，我在每个数据集中添加了两个额外的数据点，其边框宽度为 3，边框颜色与图表的背景颜色相匹配。每个额外添加的数据点都有一个值为 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
            }]
        });

【讨论】：