Question

我试图在条形图的中心显示变量的值。下面是你复制我的代码。

我想要显示的变量是数据集数据之间的减法。例如：（Data2 - Data1）+1

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script data-require="jquery" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="charts2.0.js"></script>
</head>

<body>
 <canvas id="canvas"></canvas>
 <script>
  var barChartData = {
        labels: ["14", "15", "16", "17", "18", "19", "20"],
        datasets: [{
            type: 'bar',
              label: "Competidores",
                data: [20, 18, 25, 17, 20, 13, 14],
                fill: false,
                backgroundColor: '#71B37C',
                borderColor: '#71B37C',
                hoverBackgroundColor: '#71B37C',
                hoverBorderColor: '#71B37C',
                yAxisID: 'y-axis-1'

        }, {
            label: "Ranking",
                type:'line',
                data: [20, 18, 25, 17, 20, 13, 14],
                fill: false,
                borderColor: '#EC932F',
                backgroundColor: '#EC932F',
                pointBorderColor: '#EC932F',
                pointBackgroundColor: '#EC932F',
                pointHoverBackgroundColor: '#EC932F',
                pointHoverBorderColor: '#EC932F',
                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: {
            xAxes: [{
                display: true,
                gridLines: {
                    display: false
                },
                labels: {
                    show: true,
                }
            }],
            yAxes: [{
                type: "linear",
                display: false,
                position: "left",
                id: "y-axis-1",
                gridLines:{
                    display: false
                },
                labels: {
                    show:true,

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

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

在我的示例中，变量将始终以1开始显示用户。这是一个显示排名

的图表

Chart.js显示变量在条形图中心的值

0 个答案: