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