Değer kutusu arka planları kayboldu

Üst üste yerleştirilmiş değer kutularına sahip karma bir grafiğim var. İlk değer hariç tümünde, arka plan rengi değer kutusundan kayboldu. Bu, daha önce beyaz arka planın tüm değer kutularının arkasında ortaya çıkmasıyla iyi çalışıyordu ve kodda hiçbir değişiklik olmadı, bu yüzden arka plan renginin neden birdenbire kaybolduğuna dair bir kayba uğradım. Aşağıda, kodum sorunu gösteriyor. Bunun nasıl düzeltileceğine dair herhangi bir yardım veya yön büyük ölçüde takdir edilecektir.Değer kutusu arka planları kayboldu

var maxYValue = 60; 
 
var value1 = 40; 
 
var value2 = 15; 
 
var value3 = 34; 
 
var value4 = 14; 
 
var value5 = 20; 
 
var zones = { 
 
    "type": "mixed", 
 
    "font-family": "proxima_nova_rgregular", 
 
    "title": { 
 
     "text": "MINUTES IN ZONES", 
 
     "font-family": "proxima_nova_rgregular", 
 
     "background-color": "none", 
 
     "font-color": "#39393d", 
 
     "font-size": "22px", 
 
     "adjustLayout": true 
 
    }, 
 
    "plot": { 
 
     "borderRadius": "5px 5px 0 0", 
 
     "bar-width": '50%', 
 
     "animation": { 
 
      "delay": 300, 
 
      "effect": 11, 
 
      "speed": "500", 
 
      "method": "0", 
 
      "sequence": "3", 
 
      "z-index": 2 
 
     }, 
 
     "value-box": { 
 
      "placement": "top-out", 
 
      "text": "%v", 
 
      "decimals": 0, 
 
      "font-color": "#35353b", 
 
      "font-size": "14px", 
 
      "alpha": 1, 
 
      "background-color": "#ffffff", 
 
      "padding": "5px 5px 0px 5px", 
 
      "shadow": false, 
 
      "z-index": 4 
 
     } 
 
    }, 
 
    "plotarea": { 
 
     "border-left": "3px solid #39393d", 
 
     "border-bottom": "3px solid #39393d", 
 
     "padding-left": "3px", 
 
     "margin": "dynamic", 
 
     "background-color": "none" 
 
    }, 
 
    "tooltip": { 
 
     "visible": false 
 
    }, 
 
    "scale-x": { 
 
     "placement": "opposite", 
 
     "labels":["Zone 1","Zone 2","Zone 3","Zone 4","Zone 5"], 
 
     "line-width": 0, 
 
     "tick": { 
 
      "visible": false 
 
     }, 
 
     "guide": { 
 
      "visible": false 
 
     }, 
 
     "item": { 
 
      "offsetY": 25, 
 
      "font-size": 12, 
 
      "fontColor": 'black', 
 
      "bold": true 
 
     }, 
 
    }, 
 
    "scale-y": { 
 
     "offsetEnd": 45, 
 
     "max-value": maxYValue, 
 
     "visible": false, 
 
     "line-width": 0, 
 
     "guide": { 
 
      "visible": false 
 
     } 
 
    }, 
 
    "series": [ 
 
     { 
 
      "type": "bar", 
 
      "values": [ 
 
       value1, value2, value3, value4, value5 
 
      ], 
 
      "background-color": "#cdcccc", 
 
      "z-index": 2, 
 
      "styles": ['#cdcccc', '#71cbdc', '#8cc541', '#d96c27', '#ea2629'] 
 
     }, 
 
     { 
 
      "type": "line", 
 
      "line-color": "gray", 
 
      "marker": { 
 
       "backgroundColor":"white", 
 
       "borderWidth": 2, 
 
       "border-color": "#35353b", 
 
       "visible": false, 
 
       "rules":[ 
 
        { 
 
         "rule":" %node-index%3 == 1 ", 
 
         "visible": true, 
 
         "size": 7, 
 
         "offset-y": -15 
 
        } 
 
       ] 
 

 
      }, 
 
      "value-box": { 
 
       "visible": 0 
 
      }, 
 
      "values": [ 
 
       [0, value1 + 2], 
 
       [0, maxYValue], 
 
       [0, null], 
 
       [1, value2 + 2], 
 
       [1, maxYValue], 
 
       [1, null], 
 
       [2, value3 + 2], 
 
       [2, maxYValue], 
 
       [2, null], 
 
       [3, value4 + 2], 
 
       [3, maxYValue], 
 
       [3, null], 
 
       [4, value5 + 2], 
 
       [4, maxYValue], 
 
       [4, null], 
 
      ] 
 
     } 
 
    ] 
 
} 
 
zingchart.render({ 
 
    id : 'zones', 
 
    data : zones, 
 
    height: "320", 
 
    width: "100%", 
 
    output : 'canvas' 
 
});

<script src="https://cdn.zingchart.com/2.5.2/zingchart.min.js"></script> 
 
<div class="ctabprcci-chart zone-chart" id="zones"></div>

burada ZingChart takımında

kaynak

2017-03-14 Shayna Symons

Jeff.

Bu sorun, yalnızca grafik çıktı, render yönteminde 'tuval' olarak ayarlandığında gerçekleşiyor gibi görünüyor. Çıktıyı 'svg' olarak ayarlarsanız sorunu düzeltir. Son zamanlarda değiştirdiğin ya da olmadığın bir şey olup olmadığından emin değilim. Bu bizim eski yapılarımızda da devam ediyor gibi görünüyor.

Bu sorunun neden tuval ile yapıldığını görmek için içeriden bir bilet koyabiliriz.

sayesinde yeni ZingChart sürümü (v2.6.0) bugün ışığında

kaynak

2017-03-14 21:48:46

Ah başka bir geliştirici * * Son zamanlarda tuvale svg çıktı değiştirdi. Maalesef grafiğin dışa aktarılan görüntüsünü sosyal medya üzerinden paylaşmak için özel işlevsellik yazdığımız için tuval olarak kalmamız gerekiyor. Var imgData = zingchart.exec ('zones', 'getimagedata', { formatı: 'png' }); Zingchart.AJAXEXPORT = true ile birlikte ; ve zingchart.EXPORTURL = 'http://export.zingchart.com/'; sadece tuval çıkışıyla çalışır. Bu bileti koyman için çok memnun olurum! –

Ortalama zamanda kullanabileceğim vaul kutusu değerlerinin arkasında beyaz arka plan elde etmek için başka bir yöntem var mı? Projeyi önümüzdeki hafta bu özel grafikle başlatmaya çalışıyoruz. –

Yeni yaklaşan derlemede svg ve bu dışa aktarma işlevselliğine izin veriyoruz. Sadece tuvalde değil. Bu önümüzdeki hafta ya da öylesine olacak. – nardecky

, sizin tuval değişikliğini aktardınız. Sabrınız ve ZingChart ekibinin bir parçası olduğunuz için teşekkür ederiz.

Changelog here

demo here

kaynak

2017-04-05 23:44:53

Değer kutusu arka planları kayboldu

cevap

İlgili konular