2

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

我在支持它的文档中找不到任何东西，所以我认为我必须自己使用 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/

4

2 回答 2

0

我找到了解决我的问题的方法。问题是我试图在我的数据集和我的数据属性 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
            }]
        });
于 2018-01-26T10:12:39.413 回答
0

任何你想要保持相同背景颜色的原因，

为什么你不能尝试如下

演示

fill: true,
backgroundColor: 'red',
于 2017-10-07T04:23:29.497 回答