<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
var myConfig = {
graphset: [{
backgroundColor: "#fff",
type: "pie",
x: 0,
y: 0,
height: "100%",
width: "100%",
plot: {
refAngle: 180,
slice: 80,
valueBox: {
placement: "in",
fontColor: "#fff",
text: "%v"
}
},
scaleR: {
aperture: 180
},
series: [{
values: [4],
text: "series 1",
backgroundColor: "#C9E7D5"
},
{
values: [7],
text: "series 2",
backgroundColor: "#D6C8D7"
},
{
values: [11],
text: "series 3",
backgroundColor: "#32AFCB"
},
{
values: [13],
text: "series 4",
backgroundColor: "#F0BCB9"
}
]
},
{
type: "gauge",
x: 0,
y: 0,
height: "100%",
width: "100%",
backgroundColor: "none",
plot: {
backgroundColor: "none",
refAngle: 180,
slice: 80,
valueBox: {
placement: "out",
fontColor: "#000",
text: "%v"
}
},
scaleR: {
aperture: 180,
lineColor: "red",
alpha: 0,
values: "0:35:1",
maxItems: 999,
itemsOverlap: true,
ring: {
size: 0
},
item: {
alpha: 0,
fontColor: "#8f8f8f",
rules: [{
rule: "%k == 0",
alpha: 1,
text: '120%'
},
{
rule: "%k == 4",
alpha: 1,
text: "64%"
},
{
rule: "%k == 11",
alpha: 1,
text: "35%"
},
{
rule: "%k == 22",
alpha: 1,
text: "18%"
},
{
rule: "%k == 35",
alpha: 1,
text: "-10%"
}
]
},
tick: {
visible: false
},
guide: {
backgroundColor: "none"
},
},
scale: {
sizeFactor: 0.95,
backgroundColor: "none",
lineColor: "none",
guide: {
visible: false
}
},
series: [
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id='myChart'></div>
</body>
</html>
var myConfig = {
graphset: [{
backgroundColor: "#fff",
type: "pie",
x: 0,
y: 0,
height: "100%",
width: "100%",
plot: {
refAngle: 180,
slice: 80,
valueBox: {
placement: "in",
fontColor: "#fff",
text: "%v"
}
},
scaleR: {
aperture: 180
},
series: [{
values: [4],
text: "series 1",
backgroundColor: "#C9E7D5"
},
{
values: [7],
text: "series 2",
backgroundColor: "#D6C8D7"
},
{
values: [11],
text: "series 3",
backgroundColor: "#32AFCB"
},
{
values: [13],
text: "series 4",
backgroundColor: "#F0BCB9"
}
]
},
{
type: "gauge",
x: 0,
y: 0,
height: "100%",
width: "100%",
backgroundColor: "none",
plot: {
backgroundColor: "none",
refAngle: 180,
slice: 80,
valueBox: {
placement: "out",
fontColor: "#000",
text: "%v"
}
},
scaleR: {
aperture: 180,
lineColor: "red",
alpha: 0,
values: "0:35:1",
maxItems: 999,
itemsOverlap: true,
ring: {
size: 0
},
item: {
alpha: 0,
fontColor: "#8f8f8f",
rules: [{
rule: "%k == 0",
alpha: 1,
text: '120%'
},
{
rule: "%k == 4",
alpha: 1,
text: "64%"
},
{
rule: "%k == 11",
alpha: 1,
text: "35%"
},
{
rule: "%k == 22",
alpha: 1,
text: "18%"
},
{
rule: "%k == 35",
alpha: 1,
text: "-10%"
}
]
},
tick: {
visible: false
},
guide: {
backgroundColor: "none"
},
},
scale: {
sizeFactor: 0.95,
backgroundColor: "none",
lineColor: "none",
guide: {
visible: false
}
},
series: [
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 400,
width: 600
});