2016-07-24 4 views
0

У меня есть пузырьковая диаграмма, которая выглядит, как это в настоящее время в Chart.js:Chart.js добавить метку внутри пузырьковой диаграмме

enter image description here

Я просто хочу, чтобы добавить метки к диаграмме, как это:

enter image description here

How can this be done?

Текущий код: http://jsfiddle.net/Lvc0u55v/7323/

+0

пожалуйста, поделитесь код для отладки легко –

+0

Добавлен здесь http://jsfiddle.net/Lvc0u55v/7323/ – Snowman

ответ

0

Для достижения ожидаемого результата, используйте ниже вариант

HTML:

<section class="content" ng-app="myApp" ng-controller="ChartCtrl"> 
    <canvas chart-data="data" chart-labels="labels" chart-options="options" chart-series="series" class="chart-bubble" id="base"></canvas> 
</section> 
<span id="q1">Quadrant1</span> 
<span id="q2">Quadrant2</span> 
<span id="q3">Quadrant3</span> 
<span id="q4">Quadrant4</span> 

CSS:

#q1{ 
    position:absolute; 
    margin-top:-30%; 
    margin-left:80%; 
} 
#q2 { 
    position: absolute; 
    margin-top: -30%; 
    margin-left: 20%; 
} 
#q3 { 
    position: absolute; 
    margin-bottom: -30%; 
    margin-left: 20%; 
} 
#q4 { 
    position: absolute; 
    margin-bottom: -30%; 
    margin-left: 80%; 
} 

Codepen- http://codepen.io/nagasai/pen/LkmZkL