<select id="cs" name="cs" >
<option value = "HIV+TB" >HIV+TB</option>
<option value = "TB">TB</option>
</select>
<button id="btn">Click Me</button>
<div id="chartContainer">
<script type="text/javascript">
var dropdown = d3.select("#cs")
var cs2 = dropdown.node().options[dropdown.node().selectedIndex].value;
d3.csv("test.csv", function (data) {
var svg = dimple.newSvg("#chartContainer", 590, 600);
var myChart = new dimple.chart(svg, data1990);
myChart.setBounds(105, 25, 475, 465)
myChart.showGridlines = true;
myChart.addCategoryAxis("x", ["measure","sex","year"]);
myChart.addCategoryAxis("y", "age_name");
var z = myChart.addMeasureAxis("z", "rt_mean");
var s = myChart.addSeries("sex", dimple.plot.bubble);
s.aggregate = dimple.aggregateMethod.max;
myChart.addLegend(240, 10, 330, 20, "right");
myChart.draw();
d3.select("#btn").on("click", function() {
myChart.data = …我有这个jsfiddle:http://jsfiddle.net/Ra2xS/38/.我几乎没有尝试自定义工具提示,因此我可以从工具提示中隐藏一些数据属性但完全失败.
任何人都可以帮我隐藏线系列工具提示中的"日期"吗？
var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
function barplot(id,dim,data)
{
keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg(id, dim.width, dim.height);
var parser = d3.time.format("%d-%m-%Y")
var dateReader = function (d) { return parser.parse(d[xcord]); }
var start = d3.time.month.offset(d3.min(data, dateReader), -1);
var end = d3.time.month.offset(d3.max(data, dateReader), 1);
var myChart = new dimple.chart(svg,data);
myChart.setBounds(60, 30, 505, 305);
//var x = myChart.addCategoryAxis("x", xcord);
var x = myChart.addTimeAxis("x", …我需要自定义y轴值范围从0到100开始.我不希望Dimple.js根据我拥有的数据添加自动范围.请建议是否可能.我试过了,x.overrideMax但它正在搞乱条形/线条图.
问题是将测量轴(y - 成本)的数据值视为整数的凹坑js,它们是十进制值.有任何建议如何解决这个问题？这是jsfiddle:http://jsfiddle.net/Ra2xS/7/
var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"9.7862"},{"date":"01-03-2010","cost":"9.915"},{"date":"01-04-2010","cost":"10.2634"}];
function barplot(id,dim,data)
{
keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg(id, dim.width, dim.height);
var myChart = new dimple.chart(svg,data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", xcord);
x.addOrderRule(xcord);
x.showGridlines = true;
var y = myChart.addMeasureAxis("y", ycord);
y.showGridlines = true;
var s = myChart.addSeries(null, dimple.plot.bar);
var s1 = myChart.addSeries(null, dimple.plot.line);
s1.lineWeight = 3;
s1.lineMarkers = true;
myChart.draw(1500); …假设我们有示例http://dimplejs.org/examples_viewer.html?id=bars_vertical的条形图,我想将x轴标签从"Months"更改为"Meses".我怎样才能做到这一点？
当转换到凹坑条形图中具有较少或不同条形的新数据时,被移除的条形图被推到图表左侧的彼此顶部并保持整个过渡时间.
以下是重新创建效果的代码示例:
var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
{ Animal: "Cats", Value: (Math.random() * 1000000) },
{ Animal: "Dogs", Value: (Math.random() * 1000000) },
{ Animal: "Mice", Value: (Math.random() * 1000000) },
{ Animal: "Rat", Value: (Math.random() * 1000000) },
{ Animal: "Cow", Value: (Math.random() * 1000000) }
];
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal");
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();
d3.select("#btn").on("click", function() {
myChart.data …这是示例代码......
var svg = dimple.newSvg("#chartContainer", 600, 400),
chart = null,
s1 = null,
s2 = null,
x = null,
y1 = null,
y2 = null,
data = [
{ "ID" : "1", "Value 1" : 100000, "Value 2" : 110000 },
{ "ID" : "2", "Value 1" : 90000, "Value 2" : 145000 },
{ "ID" : "3", "Value 1" : 140000, "Value 2" : 60000 }
];
chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", "ID");
y1 = chart.addMeasureAxis("y", …如何在dimple.js图表中添加标题？我想更新我的图表和轴的标题.我正在使用dimple.js.请指教.
我想在Dimple画一条垂直线.我看过这篇文章:如何用凹坑绘制垂直线？
但是,提供的示例对我不起作用.它只是添加一个点而不是我想画一条线.我无法在文档中找到任何内容,也无法在StackOverflow上找到任何内容,也无法通过谷歌搜索找到任何内容,我认为这应该是一件容易的事情 - 但到目前为止,事实证明并非如此.任何帮助,将不胜感激.
小提琴:http://jsfiddle.net/4w6gkq5s/27/
<!DOCTYPE html>
<html>
<body>
<div id="chartContainer">
<script src="http://dimplejs.org/lib/d3.v3.4.8.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js"></script>
<script type="text/javascript">
var svg = dimple.newSvg("#chartContainer", 590, 400);
d3.tsv("http://dimplejs.org/data/example_data.tsv", function (data123) {
var data = [{'name': "name1", "percentChange": 120}, {'name': "name2", "percentChange": 80}, {'name': "name3", "percentChange": 100}];
var myChart = new dimple.chart(svg, data);
myChart.defaultColors = [ new dimple.color("#177c5f") ];
myChart.defaultColors = [
new dimple.color("#3d5739"), // green
];
var x2 = myChart.addMeasureAxis("x", "percentChange");
x2.title = "Percent of last month's sales"
var y …问题:如何在X轴上显示日期值,但如果它为空则不显示图表区域中的圆圈？
所以我正在玩Dimple.js,我已经创建了一个PHP函数,用于从我的MySql数据库中提取数据,并在某些卡车到达某个位置时映射出来.因此,X轴是日期,Y轴是它到达的军事时间.我使用最小日期和最大日期作为开始和结束循环.我想在x轴上显示min和max之间的每一天,所以如果没有卡车到达,我为此分配Value = Null.
问题是,对于这些空值,我的图表底部沿着y轴的0部分存在圆圈.我不知道如何检查值是否为零不显示圆,但仍然在X轴上显示日期.数据结构如下:
$dataset_progress005[] = array('Date' => $truck_arrive_day,
'Value' => $truck_arrive_time,
'Move ID' => $move_inbound_time_id);
用这个javascript ....
<script type="text/javascript"> <!--Example Plot Chart....-->
var svg = dimple.newSvg("#area_progress_report5", 800, 400);
var data = <?php echo json_encode($dataset_progress005); ?>;
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 505, 305)
var x = myChart.addCategoryAxis("x", "Date");
//var x = myChart.addTimeAxis("x", "Date");
//var x = myChart.addMeasureAxis("x", "Date");
x.addOrderRule("Date");
myChart.addCategoryAxis("y", "Value");
myChart.addSeries("Move ID", dimple.plot.bubble);
myChart.draw();
x.shapes.selectAll("text").attr("transform",
function (d) {
return d3.select(this).attr("transform") + " translate(0, 40) rotate(-90)"; …