5
私はトップアウト配置の値のボックスが混在しています。最初の値を除いて、背景色は値ボックスから消えています。これは以前、すべてのバリューボックスの背後に白い背景が表示されていたのでうまくいきました。なぜコードが変更されていないので、なぜ背景色が突然消えてしまったのかが分かりません。以下はその問題を示す私のコードです。これを修正する方法についての助けや指示があれば幸いです。バリューボックスの背景が消えた
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>
ああ、別の開発者*は最近、キャンバスにSVGからの出力を変更でした。残念なことに、ソーシャルメディア上にグラフのエクスポートされたイメージを共有するカスタム機能を書いているので、キャンバスとして残す必要があります。 var imgData = zingchart.exec（ 'zones'、 'getimagedata'、{ 形式： 'png' }）を使用しています。 zingchart.AJAXEXPORT = trueと一緒に 。とzingchart.EXPORTURL = 'http://export.zingchart.com/';これはキャンバスの出力でのみ機能します。私はあなたがそのチケットを入れてくれて大変感謝しています！ –
平均的な時間に使うことができる値の背後に白い背景を得る別の方法がありますか？私たちは来週、この特定のグラフを使ってプロジェクトを立ち上げようとしています。 –
新しいビルドでは、svgとこのエクスポート機能を使用できます。キャンバスだけではありません。それは来週程度になるでしょう。 – nardecky