Border-Radius nicht in JavaScript

I den folgenden CodeBorder-Radius nicht in JavaScript

<html> 
<head> 
    <script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.1/anychart-ui.min.css" /> 
    <style> 
    html, body, #container { 
     width: 100%; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 
    </style> 
</head> 
<body> 
    <div id="container"></div> 
    <script type="text/javascript"> 
anychart.onDocumentReady(function() { 
    gauge = anychart.gauges.circular(); 
    gauge.fill('#fff') 
      .stroke(null) 
      .padding(0) 
      .margin(30) 
      .startAngle(0) 
      .sweepAngle(360); 

gauge.axis().labels() 
     .padding(3) 
     .position('outside') 
     .format('{%Value}\u00B0'); 

gauge.data([120, 12]); 

gauge.axis().scale() 
     .minimum(0) 
     .maximum(360) 
     .ticks({interval: 30}) 
     .minorTicks({interval: 10}); 

gauge.axis() 
     .fill('#7c868e') 
     .startAngle(0) 
     .sweepAngle(-360) 
     .width(1) 
     .ticks(
       { 
        type: 'line', 
        fill: '#7c868e', 
        length: 4, 
        position: 'outside' 
       } 
     ); 

gauge.axis(1) 
     .fill('#7c868e') 
     .startAngle(270) 
     .radius(40) 
     .sweepAngle(180) 
     .width(1) 
     .ticks(
       { 
        type: 'line', 
        fill: '#7c868e', 
        length: 4, 
        position: 'outside' 
       } 
     ); 

gauge.axis(1).labels() 
     .padding(3) 
     .position('outside') 
     .format('{%Value} m/s'); 

gauge.axis(1).scale() 
     .minimum(0) 
     .maximum(25) 
     .ticks({interval: 5}) 
     .minorTicks({interval: 1}); 

gauge.title() 
     .padding(0) 
     .margin([0, 0, 10, 0]); 

gauge.marker() 
     .fill('#64b5f6') 
     .stroke(null) 
     .size('15%') 
     .zIndex(120) 
     .radius('97%'); 

gauge.needle() 
     .fill('#1976d2') 
     .stroke(null) 
     .axisIndex(1) 
     .startRadius('6%') 
     .endRadius('38%') 
     .startWidth('2%') 
     .middleWidth(null) 
     .endWidth('0'); 

gauge.cap() 
     .radius('4%') 
     .fill('#1976d2') 
     .enabled(true) 
     .stroke(null); 

var bigTooltipTitleSettings = { 
    fontFamily: "'Verdana', Helvetica, Arial, sans-serif", 
    fontWeight: 'normal', 
    fontSize: '12px', 
    hAlign: 'left', 
    fontColor: '#212121' 
}; 

gauge.label() 
     .text('<span style="color: #64B5F6; font-size: 13px">Wind Direction: </span>' + 
       '<span style="color: #5AA3DD; font-size: 15px">' + 120 + '\u00B0 (+/- 0.5\u00B0)' + '</span><br>' + 
       '<span style="color: #1976d2; font-size: 13px">Wind Speed:</span> ' + 
       '<span style="color: #166ABD; font-size: 15px">' + 12 + 'm/s' + '</span>').useHtml(true) 
     .textSettings(bigTooltipTitleSettings); 
gauge.label() 
     .hAlign('center') 
     .anchor('centerTop') 
     .offsetY(-20) 
     .padding(15, 20) 
     .background(
       { 
        fill: '#fff', 
        stroke: { 
         thickness: 1, 
         color: '#E0F0FD' 
        } 
       } 
     ); 

// set container id for the chart 
gauge.container('container'); 

// initiate chart drawing 
    gauge.draw(); 
}); 

</script>

Dieser Code aus der folgenden Verbindung genommen wird, und erzeugt einen Windmesser haben. Wind_gauge_link

Ich möchte die Innenecken des Windmessers rund machen (wo Windrichtung und Windgeschwindigkeit angezeigt werden). Normalerweise würde ich die CSS-Datei reparieren und das Attribut border-radius hinzufügen, um dies zu tun.

Also ging ich auf und fand den Code dieses innere Quadrat:

gauge.label() 
     .hAlign('center') 
     .anchor('centerTop') 
     .offsetY(-20) 
     .padding(15, 20) 
     <CODE_HERE> 
     .background(
       { 
        fill: '#fff', 
        stroke: { 
         thickness: 1, 
         color: '#E0F0FD' 
        } 
       } 
     );

Ich habe versucht, die folgenden Zeilen in dem Code hinzufügen (in dem Teil, der CODE_HERE sagt) one-by-one (nicht alle zusammen), aber alle von ihnen fehlgeschlagen:

.borderRadius(25) 
.borderRadius("25px") 
.borderRadius = 25 
.borderRadius = "25px" 
.border-radius = "25px" 
.border-radius = 25 
.border-radius:25 
.border-radius:"25px"

Und versuchte einige weitere Möglichkeiten, arbeitete keiner.

Kann jemand dieses Problem beheben? Warum funktioniert es nicht, sollte ich nicht einfach dort die css-Linie eingeben?

Vielen Dank!

Quelle

2017-05-29 Anonymous

Bitte fügen AnyChart Tag –

sollten Sie verwenden die .corner() Methode auf dem background() des zurück gauge.label().

Überprüfen Sie die anycharts Dokumente. Hier ist der Link für ihre jsFiddle

var center_label = gauge.label() 
     .text('<span style="color: #64B5F6; font-size: 13px">Wind Direction: </span>' + 
       '<span style="color: #5AA3DD; font-size: 15px">' + 120 + '\u00B0 (+/- 0.5\u00B0)' + '</span><br>' + 
       '<span style="color: #1976d2; font-size: 13px">Wind Speed:</span> ' + 
       '<span style="color: #166ABD; font-size: 15px">' + 12 + 'm/s' + '</span>').useHtml(true) 
     .textSettings(bigTooltipTitleSettings); 


center_label 
     .hAlign('center') 
     .anchor('centerTop') 
     .offsetY(-20) 
     .padding(15, 20) 
     .background(
       { 
        fill: '#fff', 
        stroke: { 
         thickness: 1, 
         color: '#E0F0FD' 
        } 
       } 
     ); 

center_label.background() 
     .cornerType('round') 
     .corners(10);

Quelle

2017-05-29 18:32:27

Danke! funktioniert wie Magie! –

Gerade Satznummer, nicht Zeichenfolge

.stroke('3 red') 
.cornerType('round') //"Rounded", "Cut" and "RoundedInner" 
.corners(10);

mehr lesen: https://docs.anychart.com/7.2.0/General_Appearance_Settings/Background

Quelle

2017-05-29 17:49:35

die OP hat, dass als erster Eintrag in der Liste, dass „nicht funktioniert“. –

OP verwendet tatsächlich 'anycharts' nicht' highcharts' –

Ich repariere das .. sorry –

Border-Radius nicht in JavaScript

Antwort

Verwandte Themen