绘制没有轴标签(刻度)的道场蜘蛛图
Draw dojo spider chart without axis labels(ticks)
我用默认参数创建了一个 dojo 蜘蛛图。
我需要隐藏轴标签(刻度上的数据值,而不是轴标题)。
我试过 'ticks: false',但它不适用于蜘蛛图。
require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
"dojox/charting/plot2d/Spider", "dojo/fx/easing"
],
function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
var chart1;
ready(function() {
chart1 = new Chart("test1");
chart1.addPlot("default", {
type: Spider,
labelOffset: -10,
divisions: 7,
axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0,
spiderType: "polygon"
});
chart1.addSeries("China", {
data: {
"GDP": 2,
"area": 6,
"population": 2000,
"inflation": 15,
"growth": 12
}
}, {
fill: "blue"
});
chart1.addSeries("France", {
data: {
"GDP": 6,
"area": 15,
"population": 500,
"inflation": 5,
"growth": 6
}
}, {
fill: "red"
});
chart1.addSeries("USA", {
data: {
"GDP": 3,
"area": 20,
"population": 1500,
"inflation": 10,
"growth": 3
}
}, {
fill: "green"
});
chart1.addSeries("Japan", {
data: {
"GDP": 4,
"area": 2,
"population": 1000,
"inflation": 20,
"growth": 2
}
}, {
fill: "yellow"
});
chart1.addSeries("Korean", {
data: {
"GDP": 10,
"area": 10,
"population": 800,
"inflation": 2,
"growth": 18
}
}, {
fill: "orange"
});
chart1.addSeries("Canada", {
data: {
"GDP": 1,
"area": 18,
"population": 300,
"inflation": 3,
"growth": 15
}
}, {
fill: "purple"
});
chart1.render();
});
});
<script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<body>
<h1>Spider Chart</h1>
<div id="test1" style="width: 500px; height: 500px;"></div>
</body>
提前致谢!!!
嗯,看来你只是想隐藏 html 标签(如果我错了请纠正我)。
我已经更新了 运行 示例。
require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
"dojox/charting/plot2d/Spider", "dojo/fx/easing"
],
function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
var chart1;
ready(function() {
chart1 = new Chart("test1");
chart1.addPlot("default", {
type: Spider,
labelOffset: -10,
divisions: 7,
axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0,
spiderType: "polygon",
htmlLabels: false // hide html labels
});
chart1.addSeries("China", {
data: {
"GDP": 2,
"area": 6,
"population": 2000,
"inflation": 15,
"growth": 12
}
}, {
fill: "blue"
});
chart1.addSeries("France", {
data: {
"GDP": 6,
"area": 15,
"population": 500,
"inflation": 5,
"growth": 6
}
}, {
fill: "red"
});
chart1.addSeries("USA", {
data: {
"GDP": 3,
"area": 20,
"population": 1500,
"inflation": 10,
"growth": 3
}
}, {
fill: "green"
});
chart1.addSeries("Japan", {
data: {
"GDP": 4,
"area": 2,
"population": 1000,
"inflation": 20,
"growth": 2
}
}, {
fill: "yellow"
});
chart1.addSeries("Korean", {
data: {
"GDP": 10,
"area": 10,
"population": 800,
"inflation": 2,
"growth": 18
}
}, {
fill: "orange"
});
chart1.addSeries("Canada", {
data: {
"GDP": 1,
"area": 18,
"population": 300,
"inflation": 3,
"growth": 15
}
}, {
fill: "purple"
});
chart1.render();
});
});
<script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<body>
<h1>Spider Chart</h1>
<div id="test1" style="width: 500px; height: 500px;"></div>
</body>
希望对您有所帮助:)
我用默认参数创建了一个 dojo 蜘蛛图。 我需要隐藏轴标签(刻度上的数据值,而不是轴标题)。
我试过 'ticks: false',但它不适用于蜘蛛图。
require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
"dojox/charting/plot2d/Spider", "dojo/fx/easing"
],
function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
var chart1;
ready(function() {
chart1 = new Chart("test1");
chart1.addPlot("default", {
type: Spider,
labelOffset: -10,
divisions: 7,
axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0,
spiderType: "polygon"
});
chart1.addSeries("China", {
data: {
"GDP": 2,
"area": 6,
"population": 2000,
"inflation": 15,
"growth": 12
}
}, {
fill: "blue"
});
chart1.addSeries("France", {
data: {
"GDP": 6,
"area": 15,
"population": 500,
"inflation": 5,
"growth": 6
}
}, {
fill: "red"
});
chart1.addSeries("USA", {
data: {
"GDP": 3,
"area": 20,
"population": 1500,
"inflation": 10,
"growth": 3
}
}, {
fill: "green"
});
chart1.addSeries("Japan", {
data: {
"GDP": 4,
"area": 2,
"population": 1000,
"inflation": 20,
"growth": 2
}
}, {
fill: "yellow"
});
chart1.addSeries("Korean", {
data: {
"GDP": 10,
"area": 10,
"population": 800,
"inflation": 2,
"growth": 18
}
}, {
fill: "orange"
});
chart1.addSeries("Canada", {
data: {
"GDP": 1,
"area": 18,
"population": 300,
"inflation": 3,
"growth": 15
}
}, {
fill: "purple"
});
chart1.render();
});
});
<script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<body>
<h1>Spider Chart</h1>
<div id="test1" style="width: 500px; height: 500px;"></div>
</body>
提前致谢!!!
嗯,看来你只是想隐藏 html 标签(如果我错了请纠正我)。
我已经更新了 运行 示例。
require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
"dojox/charting/plot2d/Spider", "dojo/fx/easing"
],
function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
var chart1;
ready(function() {
chart1 = new Chart("test1");
chart1.addPlot("default", {
type: Spider,
labelOffset: -10,
divisions: 7,
axisColor: "lightgray",
spiderColor: "silver",
seriesFillAlpha: 0.2,
spiderOrigin: 0.16,
markerSize: 3,
precision: 0,
spiderType: "polygon",
htmlLabels: false // hide html labels
});
chart1.addSeries("China", {
data: {
"GDP": 2,
"area": 6,
"population": 2000,
"inflation": 15,
"growth": 12
}
}, {
fill: "blue"
});
chart1.addSeries("France", {
data: {
"GDP": 6,
"area": 15,
"population": 500,
"inflation": 5,
"growth": 6
}
}, {
fill: "red"
});
chart1.addSeries("USA", {
data: {
"GDP": 3,
"area": 20,
"population": 1500,
"inflation": 10,
"growth": 3
}
}, {
fill: "green"
});
chart1.addSeries("Japan", {
data: {
"GDP": 4,
"area": 2,
"population": 1000,
"inflation": 20,
"growth": 2
}
}, {
fill: "yellow"
});
chart1.addSeries("Korean", {
data: {
"GDP": 10,
"area": 10,
"population": 800,
"inflation": 2,
"growth": 18
}
}, {
fill: "orange"
});
chart1.addSeries("Canada", {
data: {
"GDP": 1,
"area": 18,
"population": 300,
"inflation": 3,
"growth": 15
}
}, {
fill: "purple"
});
chart1.render();
});
});
<script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<body>
<h1>Spider Chart</h1>
<div id="test1" style="width: 500px; height: 500px;"></div>
</body>
希望对您有所帮助:)