简体   繁体   中英

change the width of dimple js chart

I am working with dimple js and I want to change the width of chart and redraw it again how can I do this. I tried chart.width() and even chart.newSvg() but these came to nothing I have sample javascript line chart and I put it in jsfiddle
Jsfiddle
Javascript Code:

var svg = dimple.newSvg("#chartContainer", 600, 400),
            data = [
                { "Value" : 10, "Year" : 2009 },
                { "Value" : 5, "Year" : 2010 },
                { "Value" : 4, "Year" : 2011 },
                { "Value" : 7, "Year" : 2012 },
                { "Value" : 10, "Year" : 2010 },
                { "Value" : 50, "Year" : 2020 },
                { "Value" : 40, "Year" : 2015 },
                { "Value" : 100, "Year" : 2014 },
                { "Value" : 200, "Year" : 2014 }
            ];
    var chart = new dimple.chart(svg, data);
    var x = chart.addCategoryAxis("x", "Year");
    x.addOrderRule("Year");
    var y = chart.addMeasureAxis("y", "Value");
    chart.addColorAxis("Value", ["green", "yellow", "red"]);
    var lines = chart.addSeries(null, dimple.plot.line);
    lines.lineWeight = 4;
    lines.lineMarkers = true;
    chart.ease = "bounce";
    chart.staggerDraw = true;
    chart.draw(2000);

Fiddle

Change this

var svg = dimple.newSvg("#chartContainer", 600, 400),

to your required width

var svg = dimple.newSvg("#chartContainer", width, height),

And use this line before plotting chart again

 document.getElementById('').innerHTML="";

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM