Question

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

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

更新

图表中的每个元素都是一个新数据集，并将渐变对象作为backgroundColor获取，并将fill设置为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/

Answer 1

您可以保留相同背景颜色的任何理由，

为什么你不能尝试如下

Demo

fill: true,
backgroundColor: 'red',

Answer 2

我找到了解决问题的方法。问题是我试图在我的数据集之间创建一些空间，我的数据属性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
            }]
        });

在line chartjs上绘制边框

2 个答案: