Entwickler-Ecke :: Thema anzeigen - Label soll in CircleProgess

Csharp-programmierer - So 05.02.17 20:43
Titel: Label soll in CircleProgess

Hallo,
ich habe mir jetzt ein Plugin heruntergeladen, welches mir einen CricleProgrss erlaubt. Soweit funktioniert das alles, aber ich möchte in der Mitte noch eine Zahl haben (Label)

HTML-Dokument

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:

<table class="wsite-multicol-table">
    <tbody class="wsite-multicol-tbody">
      <tr class="wsite-multicol-tr">
        <td class="wsite-multicol-col" style="width:33%; padding:0 15px;"><center><div class="firstx"></div></center></td>
        <td class="wsite-multicol-col" style="width:33%; padding:0 15px;"><center><div class="firstx"></div></center></td>
        <td class="wsite-multicol-col" style="width:33%; padding:0 15px;"><center><div class="firstx"></div></center></td>
      </tr>
      <tr class="wsite-multicol-tr">
        <td class="wsite-multicol-col" style="width:33%; padding:20px 15px;"><font color="#00b1ff" size="5"><center><label>Downloads</label></center></font></td>
        <td class="wsite-multicol-col" style="width:33%; padding:20px 15px;"><font color="#00b1ff" size="5"><center><label>Bewertung</label></center></font></td>
        <td class="wsite-multicol-col" style="width:33%; padding:20px 15px;"><font color="#00b1ff" size="5"><center><label>xD</label></center></font></td>
      </tr>
    </tbody>
    </table>
      </div>
    </div>
    
    <script>
      function EnableStyle() {
        $('.firstx').circleProgress({
          value: 1.0,
          size: 200.0,
          startAngle: -Math.PI,
          thickness: 'auto',
          
          color: '#3aeabb',
          fill: {
            gradient: ['#00b1ff', '#00b1ff']
          },


          emptyFill: 'rgba(0, 0, 0, .1)',
          animation: {
            duration: 1200,
            easing: 'circleProgressEasing'
          },

          animationStartValue: 0.0,
          reverse: false,
          lineCap: 'round',
          });
      }
    </script>

Hier habe ich mit dieses Plugin heruntergeladen: http://www.jqueryscript.net/other/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress.html

Wie kann ich noch ein Label in die Mitte machen?

Moderiert von Christian S.: JS- durch HTML-Tag ersetzt

jfheins - Mo 06.02.17 01:49

Guck' dir mal fen Quellcode der Demo-Seite an: http://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/

Da ist z.B.:

JavaScript-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

/*
 * Example 3:
 *   - custom gradient
 *   - listening to `circle-animation-progress` event and display the dynamic change of the value: from 0 to 0.8
 */
$('.third.circle').circleProgress({
    value: 0.8,
    fill: { gradient: ['#0681c4', '#07c6c1'] }
}).on('circle-animation-progress', function(event, progress, stepValue) {
    $(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
});

Also ein Callback-Event, in dem du den Fortschritt wieder gesagt bekommst. Solange es nur eine statische Zahl ist, kannst du sie ja einfach drüber positionieren.

Moderiert von Christian S.: PHP- durch JS-Tags ersetzt

Csharp-programmierer - Mo 06.02.17 14:10

Ah, vielen Dank. Jetzt bekomme ich schonmal einen Wert angezeigt:

HTML-Dokument

1:
2:
3:
4:
5:

<td class="wsite-multicol-col" style="width:33%; padding:0 15px;">
          <div class="firstx">
              <strong></strong>
          </div>
        </td>

JavaScript-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:

function EnableStyle() {
        $('.firstx').circleProgress({
          value: 1.0,
          size: 200.0,
          startAngle: -Math.PI,
          thickness: 'auto',
          
          color: '#3aeabb',
          fill: {
            gradient: ['#00b1ff', '#00b1ff']
          },


          emptyFill: 'rgba(0, 0, 0, .1)',
          animation: {
            duration: 1200,
            easing: 'circleProgressEasing'
          },

          animationStartValue: 0.0,
          reverse: false,
          lineCap: 'round',
        }).on('circle-animation-progress', function(event, progress, stepValue) {
          $(this).find('strong').text(String(stepValue.toFixed(2)).substr(1));
        });
      }

Der Wert ist aber jetzt rechts unten neben dem Kreis. Wie kann ich diesen Wert in den Kreis rein machen?

Csharp-programmierer - Mo 06.02.17 18:19

Jetzt habe ich es geschafft, dass die Zahl in dem Kreis ist. Aber wie kann ich jetzt eine eigene Zahl dort rein machen?

JavaScript-Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:

function EnableStyle() {
        $('.firstx').circleProgress({
          value: 1.0,
          size: 150.0,
          startAngle: -Math.PI,
          thickness: 'auto',
          
          color: '#3aeabb',
          fill: {
            gradient: ['#00b1ff', '#00b1ff']
          },


          emptyFill: 'rgba(0, 0, 0, .1)',
          animation: {
            duration: 1200,
            easing: 'circleProgressEasing'
          },

          animationStartValue: 0.0,
          reverse: false,
          lineCap: 'round',
        }).on('circle-animation-progress', function(event, progress, stepValue) {
          $(this).find('strong').text(String(<?php echo $xx; ?>));
        });

Wenn ich das jetzt so ausführe, hängt sich der Browser vor Fehlern auf :/

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!