我画了一个图表使用图表如下
在这个上面的图表中,我想使一条线更粗(粉红色标记)像其他线,我也想删除x轴线(绿色标记)。我怎么做,请帮助我。
请看小提琴这里Live Chart
var ganttchart = document.getElementById('bar-chart');
new Chart(ganttchart, {
type: 'line',
data: {
datasets: [
{
label: 'Scatter Dataset',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 0,
y: 9
}, {
x: 3,
y: 9
}
]
},
{
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 3,
y: 7
}, {
x: 5,
y: 7
}
]
},
{
label: 'Scatter Dataset',
backgroundColor: "rgba(246,156,85,1)",
borderColor: "rgba(246,156,85,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 5,
y: 5
}, {
x: 10,
y: 5
}
]
},
{
backgroundColor: "rgba(208,255,154,1)",
borderColor: "rgba(208,255,154,1)",
fill: false,
borderWidth : 15,
pointRadius : 0,
data: [
{
x: 10,
y: 3
}, {
x: 13,
y: 3
}
]
}
]
},
options: {
legend : {
display : false
},
scales: {
xAxes: [{
type: 'linear',
position: 'top',
gridLines: {
lineWidth:20
},
ticks : {
beginAtzero :true,
stepSize : 1
}
}],
yAxes : [{
gridLines: {
display:false,
},
ticks : {
beginAtZero :true,
max : 10,
display:false
}
}]
},
animation: {
duration: 0
},
hover: {animationDuration: 0}
}
});
2条答案
按热度按时间pnwntuvh1#
您可以在这里找到当前的轴配置选项:Axes - Chart.js Documentation
轴配置选项有一个全局字段
display
,说明如下:If set to false the axis is hidden from view. Overrides gridLines.display, scaleLabel.display, and ticks.display.
以下是我的实现方法:
bvhaajcl2#
只需将border更改为false。