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

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

javascript jquery angularjs charts chart.js

Javascript Chart.js在条形图的中心显示变量的值,javascript,jquery,angularjs,charts,chart.js,Javascript,Jquery,Angularjs,Charts,Chart.js,我试图在条形图的中心显示一个变量的值。下面你正在复制我的代码我试图显示的变量是数据集数据之间的减法。例如：（Data2-Data1）+1 var barChartData={ 标签：[“14”、“15”、“16”、“17”、“18”、“19”、“20”]，数据集：[{ 类型：'bar'，标签：“Competidores”，数据：[20,18,25,17,20,13,14]，填充：假，背景颜色：“#71B37C”，边框颜色：“#71B37C”， hoverBackgroundCol

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

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


var barChartData={
标签：[“14”、“15”、“16”、“17”、“18”、“19”、“20”]，
数据集：[{
类型：'bar'，
标签：“Competidores”，
数据：[20,18,25,17,20,13,14]，
填充：假，
背景颜色：“#71B37C”，
边框颜色：“#71B37C”，
hoverBackgroundColor:“#71B37C”，
hoverBorderColor:“#71B37C”，
yAxisID:'y轴-1'
}, {
标签：“排名”，
类型：'行'，
数据：[20,18,25,17,20,13,14]，
填充：假，
边框颜色：“#EC932F”，
背景颜色：“#EC932F”，
pointBorderColor:“#EC932F”，
pointBackgroundColor:“#EC932F”，
pointHoverBackgroundColor:“#EC932F”，
pointHoverBorderColor:“#EC932F”，
yAxisID:'y轴-2'
} ]
};
window.onload=函数（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
window.myBar=新图表（ctx{
类型：'bar'，
数据：barChartData，
选项：{
回答：是的，
工具提示：{
模式：“标签”
},
要素：{
行：{
填充：假
}
},
比例：{
xAxes：[{
显示：对，
网格线：{
显示：假
},
标签：{
秀：没错，
}
}],
雅克斯：[{
类型：“线性”，
显示：假，
位置：“左”，
id:“y轴-1”，
网格线：{
显示：假
},
标签：{
秀：没错，
}
}, {
类型：“线性”，
显示：对，
位置：“对”，
id:“y轴-2”，
网格线：{
显示：假
},
标签：{
秀：没错，
}
}]
}
}
});
};

在我的示例中，该变量将始终在第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>