Question

我的图表正确渲染，但它们在同一点上重叠并根据鼠标悬停的位置在它们之间进行更改（两个图形位于完全相同的位置，即使它们的画布和div元素不是）。以下是显示div和画布位置的图像：

我不熟悉CSS，因此在开始更改样式和颜色之前，我使用了一些教程片段来获取临时布局，但我需要帮助才能正确定位这些元素。

以下是HTML代码：

<div id="awp" class="tabcontent">
    <div class="dropdown">
        <button onclick="dropMenu(1)" class="dropbtn">Choose Dates</button>
        <div id="myDropdown1" class="dropdown-content">
            <a id="2016" onClick="addData(myChart, 'check' , 2)">Last 3 Months</a>
            <a id="5m" onClick="removeData(myChart)">Test 3</a>
            <a id="testNew">Bye bye</a>
            <a id = "2015" onClick="addMoreData(myChart)">does</a>
        </div>
    </div>
    <h3>Recreated in chart.js first graphs</h3>

<div class="contain1">
<canvas id="results-graph" class="cyo" width="600" height="500"></canvas>
</div>

<div class="contain2">
<canvas id="results-graph2" class="oem" width="600" height="500"></canvas>
</div>

这是CSS：

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;} 

.contain1 {
    width: 600px;
    height: 500px;
    float: left;
    overflow: auto;
}

.contain2 {
    width: 600px;
    height: 500px;
    float: right;
    overflow: auto;
}

.cyo {
    display: block;
width: 600px;
    height: 500px;
}

.oem {
    display: block;
width: 600px;
    height: 500px;
}

这是图表代码：

<script>
var data = [12, 19, 13, 5, 21, 13];

var ctx = document.getElementById("results-graph");


var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
        datasets: [ {
            label: 'Average Watch Sell Price in USD',
            data: data,
            type: 'line',
            yAxisID: 'B',
            fill: false,
            backgroundColor: ['rgba(0,0,0,1)'],
            borderColor: ['rgba(0,0,0,1)']
        }, 
        {
            label: 'Amount of Watches Sold',
            data: data,
            yAxisID: 'A',
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }

        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
             yAxes: [{
                id: 'A',
                type: 'linear',
                position: 'left',
                 ticks: {
                     beginAtZero:true
                 },
                 scaleLabel:{
                    display: true,
                    labelString: 'Amount Sold',
                 }

             }, {
                id: 'B',
                type: 'linear',
                position: 'right',

                ticks: {
                    beginAtZero:true
                },
                scaleLabel:{
                    display: true,
                    labelString: 'Average Price in USD',

                }
            }]
        }
    }
});


</script>
<script>
var data2 = [12, 19, 13, 5, 21, 13];
var ctx2 = document.getElementById("results-graph");

var myChart2 = new Chart(ctx2, {
    type: 'bar',
    data: {
        labels: ["Red", "Red" , "Yellow", "Green", "Purple", "Orange"],
        datasets: [ {
            label: 'Average Watch Sell Price in USD',
            data: data2,
            type: 'line',
            yAxisID: 'B',
            fill: false,
            backgroundColor: ['rgba(0,0,0,1)'],
            borderColor: ['rgba(0,0,0,1)']
        }, 
        {
            label: 'Amount of Watches Sold',
            data: data2,
            yAxisID: 'A',
            backgroundColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }

        ]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
             yAxes: [{
                id: 'A',
                type: 'linear',
                position: 'left',
                 ticks: {
                     beginAtZero:true
                 },
                 scaleLabel:{
                    display: true,
                    labelString: 'Amount Sold',
                 }

             }, {
                id: 'B',
                type: 'linear',
                position: 'right',

                ticks: {
                    beginAtZero:true
                },
                scaleLabel:{
                    display: true,
                    labelString: 'Average Price in USD',

                }
            }]
        }
    }
});</script>

Answer 1

您没有更改这就是为什么第二张图没有生成的原因。

var ctx2 = document.getElementById("results-graph2");

你也可以像这样提供背景和边框。

            backgroundColor: ['rgba(0,0,0,1)'],
            borderColor: ['rgba(0,0,0,1)']

JSFiddle：here

chart.js在div和canvas之外呈现

1 个答案: