Autor Beitrag
Csharp-programmierer
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: So 05.02.17 19:43 
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)

1

ausblenden volle Höhe 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: www.jqueryscript.net...Circle-Progress.html

Wie kann ich noch ein Label in die Mitte machen?

Moderiert von user profile iconChristian S.: JS- durch HTML-Tag ersetzt
Einloggen, um Attachments anzusehen!
_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
jfheins
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 873
Erhaltene Danke: 148

Win7
VS 2013, VS2015
BeitragVerfasst: Mo 06.02.17 00:49 
Guck' dir mal fen Quellcode der Demo-Seite an: www.jqueryscript.net...vas-Circle-Progress/

Da ist z.B.:
ausblenden 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 user profile iconChristian S.: PHP- durch JS-Tags ersetzt
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: Mo 06.02.17 13:10 
Ah, vielen Dank. Jetzt bekomme ich schonmal einen Wert angezeigt:

ausblenden 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>


ausblenden 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?

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: Mo 06.02.17 17:19 
Jetzt habe ich es geschafft, dass die Zahl in dem Kreis ist. Aber wie kann ich jetzt eine eigene Zahl dort rein machen?

ausblenden 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 :/

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein
Csharp-programmierer Threadstarter
ontopic starontopic starontopic starontopic starontopic starontopic starontopic starontopic star
Beiträge: 696
Erhaltene Danke: 10

Windows 8.1
C# (VS 2013)
BeitragVerfasst: Mo 06.02.17 17:30 
Hat sich jetzt erledigt, habe den Fehler gefunden

_________________
"Wer keinen Sinn im Leben sieht, ist nicht nur unglücklich, sondern kaum lebensfähig" - Albert Einstein