如何将yAxisLabel放入chartjs

时间:2015-04-08 13:13:16

标签: jquery charts chart.js chartnew.js

任何人都可以告诉我如何将y轴标签放在chartjs中我已经尝试过ChartNew.js并且它增加了画布的高度和宽度。 这个图表看起来像普通的chart.js  enter image description here

当我使用chartnew.js时,相同的图形看起来像这样,但它显示了标签 enter image description here

1 个答案:

答案 0 :(得分:0)

我已经通过使用此css

解决了这个问题
 .axisLabel {
    position: absolute;
    text-align: center;
    font-size: 12px;
}

.xaxisLabel {
    bottom: 3px;
    left: 0;
    right: 0;
}

#placeholder {
    width: 600px;
    height: 300px;
    padding: 10px 5px 0 0;
    margin: 15px auto 30px auto;
    border: 1px solid #ddd;
    background: #fff;
    background: linear-gradient(#f6f6f6 0, #fff 50px);
    background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
    background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.yaxisLabel {
    top: 50%;
    left: -10px;
    transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

并在画布上方插入div

 <div class='axisLabel yaxisLabel' style="margin-top:35px">Revenue (AED)</div>