使用Chart.js添加多个图表和多个轴标签。

huangapple
go评论60阅读模式
英文:

add multi chart with multi axes label using chart js

问题

我试图一起制作条形图和折线图，但处理坐标轴标签时出现了问题

我正在使用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>

我尝试了上面提到的代码，得到了这个结果

我的输出图像

但是，我的预期结果应该是我不能将销售额移到右侧轴标签

预期结果图像

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function createDiagonalPattern(color = &#39;black&#39;) {
let shape = document.createElement(&#39;canvas&#39;)
shape.width = 10
shape.height = 10
let c = shape.getContext(&#39;2d&#39;)
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, &#39;repeat&#39;)
}
var barChartData = {
labels: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;],
datasets: [{
type: &#39;bar&#39;,
label: &quot;Visitor&quot;,
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: createDiagonalPattern(&#39;grey&#39;),
borderColor: &#39;grey&#39;,
borderWidth: 1,
hoverBackgroundColor: &#39;#71B37C&#39;,
hoverBorderColor: &#39;#71B37C&#39;,
yAxisID: &#39;y1&#39;
}, {
label: &quot;Sales&quot;,
type:&#39;line&#39;,
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: &#39;#2E41CF&#39;,
backgroundColor: &#39;#2E41CF&#39;,
pointBorderColor: &#39;#2E41CF&#39;,
pointBackgroundColor: &#39;white&#39;,
pointHoverBackgroundColor: &#39;#2E41CF&#39;,
pointHoverBorderColor: &#39;#2E41CF&#39;,
pointStyle: &#39;circle&#39;,
pointRadius: 10,
pointHoverRadius: 15,
pointBorderWidth:3,
yAxisID: &#39;y&#39;
} ]
};
window.onload = function() {
var ctx = document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;);
window.myBar = new Chart(ctx, {
type: &#39;bar&#39;,
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: &#39;label&#39;
},
elements: {
line: {
fill: false
}
},
scales: {
y: {
type: &quot;linear&quot;,
display: false,
position: &quot;left&quot;,
gridLines:{
display: false
},
labels: {
show:true,
}
},
y1: {
type: &quot;linear&quot;,
display: false,
position: &quot;right&quot;,
gridLines:{
display: false
},
labels: {
show:true,
}
} }
}
});
}

<!-- language: lang-html -->

&lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

I am trying to make bar and line chart together but while handling the axes label is not working properly

I am using chart js

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot; /&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;canvas id=&quot;canvas&quot;&gt;&lt;/canvas&gt;
&lt;script&gt;
function createDiagonalPattern(color = &#39;black&#39;) {
let shape = document.createElement(&#39;canvas&#39;)
shape.width = 10
shape.height = 10
let c = shape.getContext(&#39;2d&#39;)
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, &#39;repeat&#39;)
}
var barChartData = {
labels: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;, &quot;July&quot;],
datasets: [{
type: &#39;bar&#39;,
label: &quot;Visitor&quot;,
data: [200, 185, 590, 621, 250, 400, 95],
fill: false,
backgroundColor: createDiagonalPattern(&#39;grey&#39;),
borderColor: &#39;grey&#39;,
borderWidth: 1,
hoverBackgroundColor: &#39;#71B37C&#39;,
hoverBorderColor: &#39;#71B37C&#39;,
yAxisID: &#39;y-axis-1&#39;
}, {
label: &quot;Sales&quot;,
type:&#39;line&#39;,
data: [51, 65, 40, 49, 60, 37, 40],
fill: false,
borderColor: &#39;#2E41CF&#39;,
backgroundColor: &#39;#2E41CF&#39;,
pointBorderColor: &#39;#2E41CF&#39;,
pointBackgroundColor: &#39;white&#39;,
pointHoverBackgroundColor: &#39;#2E41CF&#39;,
pointHoverBorderColor: &#39;#2E41CF&#39;,
pointStyle: &#39;circle&#39;,
pointRadius: 10,
pointHoverRadius: 15,
pointBorderWidth:3,
yAxisID: &#39;y-axis-2&#39;
} ]
};
window.onload = function() {
var ctx = document.getElementById(&quot;canvas&quot;).getContext(&quot;2d&quot;);
window.myBar = new Chart(ctx, {
type: &#39;bar&#39;,
data: barChartData,
options: {
responsive: true,
tooltips: {
mode: &#39;label&#39;
},
elements: {
line: {
fill: false
}
},
scales: {
x: [{
display: true,
gridLines: {
display: true
},
position: &#39;top&#39;,
labels: {
show: false,
}
}],
y: [{
type: &quot;linear&quot;,
display: false,
position: &quot;left&quot;,
id: &quot;y-axis-1&quot;,
gridLines:{
display: false
},
labels: {
show:true,
}
}, {
type: &quot;linear&quot;,
display: false,
position: &quot;right&quot;,
id: &quot;y-axis-2&quot;,
gridLines:{
display: false
},
labels: {
show:true,
}
}]
}
}
});
}
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

I have tried the code which i have already mentioned above

and got this result
my output image

but
my expected result should be I could not able to shift my sales to right axes label

expected result image

答案1

得分: 1

你初始化比例尺的方式可能有误，也许这可以帮助：

scales: {
    "y-axis-2": {
        type: "linear",
        display: true,
        position: "left",
        gridLines: {
            display: false
        },
        labels: {
            show: true,
        }
    },
    "y-axis-1": {
        type: "linear",
        display: true,
        position: "right",
        gridLines: {
            display: false
        },
        labels: {
            show: true,
        }
    }
}

更多信息可以在这里找到：https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

英文:

You are initializing the scale wrong maybe this can help

scales: {
&quot;y-axis-2&quot;:
{
type: &quot;linear&quot;,
display: true,
position: &quot;left&quot;,
gridLines:{
display: false
},
labels: {
show:true,
}
},  &quot;y-axis-1&quot;: {
type: &quot;linear&quot;,
display: true,
position: &quot;right&quot;,
gridLines:{
display: false
},
labels: {
show:true,
}
}
}

https://www.chartjs.org/docs/latest/samples/line/multi-axis.html

huangapple
  • 本文由 发表于 2023年6月13日 16:50:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76463207.html
  • bar-chart
  • chart.js
  • javascript
  • linechart
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定