function createDiagonalPattern(color = 'black') {
let shape = document.createElement('canvas')
shape.width = 10
shape.height = 10
let c = shape.getContext('2d')
c.strokeStyle = color
c.beginPath()
c.moveTo(2, 0)
c.lineTo(10, 8)
c.stroke()
c.beginPath()
c.moveTo(0, 8)
c.lineTo(2, 10)
c.stroke()
return c.createPattern(shape, 'repeat')
}
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: createDiagonalPattern('grey'),
borderColor: 'grey',
borderWidth: 1,
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y1'
}, {
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#2E41CF',
backgroundColor: '#2E41CF',
pointBorderColor: '#2E41CF',
pointBackgroundColor: 'white',
pointHoverBackgroundColor: '#2E41CF',
pointHoverBorderColor: '#2E41CF',
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15,
pointBorderWidth:3,
yAxisID: 'y'
} ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
y: {
type: "linear",
display: false,
position: "left",
gridLines:{
display: false
},
labels: {
show:true,
}
},
y1: {
type: "linear",
display: false,
position: "right",
gridLines:{
display: false
},
labels: {
show:true,
}
} }
}
});
}<canvas id="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>我试图使酒吧和线图在一起，但同时处理轴标签是不能正常工作
我用的是chart js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
function createDiagonalPattern(color = 'black') {
let shape = document.createElement('canvas')
shape.width = 10
shape.height = 10
let c = shape.getContext('2d')
c.strokeStyle = color
c.beginPath()
c.moveTo(2, 0)
c.lineTo(10, 8)
c.stroke()
c.beginPath()
c.moveTo(0, 8)
c.lineTo(2, 10)
c.stroke()
return c.createPattern(shape, 'repeat')
}
var barChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
type: 'bar',
label: "Visitor",
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: createDiagonalPattern('grey'),
borderColor: 'grey',
borderWidth: 1,
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-1'
}, {
label: "Sales",
type:'line',
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: '#2E41CF',
backgroundColor: '#2E41CF',
pointBorderColor: '#2E41CF',
pointBackgroundColor: 'white',
pointHoverBackgroundColor: '#2E41CF',
pointHoverBorderColor: '#2E41CF',
pointStyle: 'circle',
pointRadius: 10,
pointHoverRadius: 15,
pointBorderWidth:3,
yAxisID: 'y-axis-2'
} ]
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: 'label'
},
elements: {
line: {
fill: false
}
},
scales: {
x: [{
display: true,
gridLines: {
display: true
},
position: 'top',
labels: {
show: false,
}
}],
y: [{
type: "linear",
display: false,
position: "left",
id: "y-axis-1",
gridLines:{
display: false
},
labels: {
show:true,
}
}, {
type: "linear",
display: false,
position: "right",
id: "y-axis-2",
gridLines:{
display: false
},
labels: {
show:true,
}
}]
}
}
});
}
</script>
</body>
</html>我已经试过了上面已经提到的代码
得到了这个结果my output image
但我的预期结果应该是我无法将我的销售转移到正确的轴标签
expected result image
1条答案
按热度按时间ikfrs5lh1#
您的初始化比例错误，也许这可以帮助
https://www.chartjs.org/docs/latest/samples/line/multi-axis.html