2017-02-01 3 views
1

私はZingChartスクリプトのインスタンスをバージョン2.5.2にアップデートしました。これにより、前に示したチャートからラベルが消えました。以前のバージョンのZingChartでエラーをスローしないように管理していたJSONの問題か、現在のリリースのバグかどうかはわかりません。前 : enter image description hereZingChartスクリプトを2.5.2に更新するときにラベルが消えました

後: enter image description here

マイJSON:

var maxYValue = 60; 
 
          var value1 = 40; 
 
          var value2 = 15; 
 
          var value3 = 34; 
 
          var value4 = 14; 
 
          var value5 = 20; 
 
          var zones_1 = { 
 
           "type": "mixed", 
 
           "font-family": "proxima_nova_rgregular", 
 
           "title": { 
 
            "text": "MINUTES <b>IN ZONES</b>", 
 
            "font-family": "proxima_nova_rgregular", 
 
            "background-color": "none", 
 
            "font-color": "#39393d", 
 
            "font-size": "22px", 
 
            "adjustLayout": true, 
 
            "padding-bottom": 50 
 
           }, 
 
           "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, 
 
             "backgroundColor": "#ffffff", 
 
             "padding": "5px 5px 0px 5px", 
 
             "shadow": false 
 
            } 
 
           }, 
 
           "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", 
 
            "line-width": 0, 
 
            "tick": { 
 
             "visible": false 
 
            }, 
 
            "guide": { 
 
             "visible": false 
 
            }, 
 
            "item": { 
 
             "visible": false 
 
            }, 
 
           }, 
 
           "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": "grey", 
 
             "marker": { "visible": 0 }, 
 
             "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], 
 
             ] 
 
            } 
 
           ], 
 
           "labels": [ 
 
            { 
 
             "text": "Zone 1", 
 
             "font-size": "13px", 
 
             "padding": "10px 5px", 
 
             "borderWidth": 1, 
 
             "borderColor": "#ffffff", 
 
             "backgroundColor": "#ffffff", 
 
             "callout": true, 
 
             "calloutWidth": 0, 
 
             "calloutHeight": 5, 
 
             'hook': 'scale:name=scale-x,index=0', 
 
             'offset-y': -200, 
 
             "calloutTip": { 
 
              'offset-y': -200, 
 
              "type": "circle", 
 
              "background-color": "#fff", 
 
              "border-width": 2, 
 
              "border-color": "#35353b", 
 
              "size": 7, 
 
              "shadow": false 
 
             } 
 
            }, 
 
            { 
 
             "text": "Zone 2", 
 
             "font-size": "13px", 
 
             "padding": "10px 5px", 
 
             "borderWidth": 1, 
 
             "borderColor": "#ffffff", 
 
             "backgroundColor": "#ffffff", 
 
             "callout": true, 
 
             "calloutWidth": 0, 
 
             "calloutHeight": 5, 
 
             'hook': 'scale:name=scale-x,index=1', 
 
             'offset-y': -200, 
 
             "calloutTip": { 
 
              'offset-y': -200, 
 
              "type": "circle", 
 
              "background-color": "#fff", 
 
              "border-width": 2, 
 
              "border-color": "#35353b", 
 
              "size": 7, 
 
              "shadow": false 
 
             } 
 
            }, 
 
            { 
 
             "text": "Zone 3", 
 
             "font-size": "13px", 
 
             "padding": "10px 5px", 
 
             "borderWidth": 1, 
 
             "borderColor": "#ffffff", 
 
             "backgroundColor": "#ffffff", 
 
             "callout": true, 
 
             "calloutWidth": 0, 
 
             "calloutHeight": 5, 
 
             'hook': 'scale:name=scale-x,index=2', 
 
             'offset-y': -200, 
 
             "calloutTip": { 
 
              'offset-y': -200, 
 
              "type": "circle", 
 
              "background-color": "#fff", 
 
              "border-width": 2, 
 
              "border-color": "#35353b", 
 
              "size": 7, 
 
              "shadow": false 
 
             } 
 
            }, 
 
            { 
 
             "text": "Zone 4", 
 
             "font-size": "13px", 
 
             "padding": "10px 5px", 
 
             "borderWidth": 1, 
 
             "borderColor": "#ffffff", 
 
             "backgroundColor": "#ffffff", 
 
             "callout": true, 
 
             "calloutWidth": 0, 
 
             "calloutHeight": 5, 
 
             'hook': 'scale:name=scale-x,index=3', 
 
             'offset-y': -200, 
 
             "calloutTip": { 
 
              'offset-y': -200, 
 
              "type": "circle", 
 
              "background-color": "#fff", 
 
              "border-width": 2, 
 
              "border-color": "#35353b", 
 
              "size": 7, 
 
              "shadow": false 
 
             } 
 
            }, 
 
            { 
 
             "text": "Zone 5", 
 
             "font-size": "13px", 
 
             "padding": "10px 5px", 
 
             "borderWidth": 1, 
 
             "borderColor": "#ffffff", 
 
             "backgroundColor": "#ffffff", 
 
             "callout": true, 
 
             "calloutWidth": 0, 
 
             "calloutHeight": 5, 
 
             'hook': 'scale:name=scale-x,index=4', 
 
             'offset-y': -200, 
 
             "calloutTip": { 
 
              'offset-y': -200, 
 
              "type": "circle", 
 
              "background-color": "#fff", 
 
              "border-width": 2, 
 
              "border-color": "#35353b", 
 
              "size": 7, 
 
              "shadow": false 
 
             } 
 
            } 
 
           ], 
 
          }

任意の助けいただければ幸いです。私はスクリプトの最新バージョンを保ちたいが、本当にそれらのラベルを元に戻す必要がある。

答えて

1

現時点ではビルド間で問題の原因を正確には話すことができませんが、チームが検討します。私はあなたのJSONを見ましたが、あなたが探している出力を簡単な方法で得ることができると思います。私は最新のビルドで動作する以下のアップデートされたチャートの設定を含んでいます。

ZingChartチームの全開示。

var maxYValue = 60; 
 
          var value1 = 40; 
 
          var value2 = 15; 
 
          var value3 = 34; 
 
          var value4 = 14; 
 
          var value5 = 20; 
 

 
          
 
        var myConfig ={ 
 
           "type": "mixed", 
 
           "font-family": "proxima_nova_rgregular", 
 
           "title": { 
 
            "text": "MINUTES <b>IN ZONES</b>", 
 
            "font-family": "proxima_nova_rgregular", 
 
            "background-color": "none", 
 
            "font-color": "#39393d", 
 
            "font-size": "22px", 
 
            "adjustLayout": true, 
 
            "padding-bottom": 50 
 
           }, 
 
           "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, 
 
             "backgroundColor": "#ffffff", 
 
             "padding": "5px 5px 0px 5px", 
 
             "shadow": false 
 
            } 
 
           }, 
 
           "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"],//set zone label here. Much easier than labals:[] 
 
            "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": 3, 
 
             "borderColor":"gray", 
 
             "visible": false, 
 
             "rules":[//create marker which is always at the top of line 
 
              { 
 
              'rule':" %node-index%3 == 1 ", 
 
              visible: true, 
 
              size: 10 
 
              } 
 
              ] 
 
              
 
             }, 
 
             "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({ 
 
\t id: 'myChart', 
 
\t data: myConfig, 
 
\t height: '100%', 
 
\t width: '100%' 
 
});
html, body { 
 
\t height:100%; 
 
\t width:100%; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
#myChart { 
 
\t height:100%; 
 
\t width:100%; 
 
\t min-height:150px; 
 
} 
 
.zc-ref { 
 
\t display:none; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t <!--Inject End--> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> 
 
\t </body> 
 
</html>

+0

お手数をおかけします。変更したJSONを実装しました。 –

0

問題が&吹き出し先端ラベルに設定されたオフセット-yの属性です。削除するか、ゼロに設定する必要があります。 scale-xには「配置」があるため、新しいlibコードは正しいです:上に配置されるように「反対」になります(あなたが見える項目からvisible:falseを削除した場合)。

ほとんどの場合、古いコードは正しいスケール位置を使用していない可能性があります。その理由は、offset-yを使用して修正する必要がある理由です。

関連する問題