Question

我试图在我的MVC网页中将Morris区域放到一个正方形中，但是当我用测试数据构建图表时，X轴超出了div的限制。有没有办法调整点之间的间距？或减小折线图绘制的大小。

var test = JSON.parse(@(Html.Raw(Json.Encode(Model))));




var Chart = Morris.Area({
    element: 'Mline',
    data: test,
    //data: [{
    //    label: "Imports",
    //    value: 100
    //}, {
    //    label: "Exports",
    //    value: 200
    //}, {
    //    label: "Inter-Country Trade",
    //    value: 50
    //}],
    xkey: 'period',
    ykeys: ['iphone', 'ipad', 'itouch'],
    labels: ['iPhone', 'iPad', 'iPod Touch'],
    pointSize: 2,
    xLabels: "year",
    behaveLikeLine: true,

    pointSize: 5,
    hideHover: 'auto',
    resize: true
});
Chart.redraw;

测试数据如下

0: {period: "2000", iphone: 20, ipad: 40, itouch: 10}
1: {period: "2001", iphone: 25, ipad: 45, itouch: 10}
2: {period: "2002", iphone: 10, ipad: 5, itouch: 15}

保存图表的表div也可以随着动态构建另一张表而调整大小，因此，如果确实发生这种情况，我是否有办法调整图表？

其他信息该div使用MVC中的部分视图填充

操作：

public ActionResult ShowLineChart()
    {

        List < MorrisLineStructure > Data= new List<MorrisLineStructure>();

        MorrisLineStructure Data1 = new MorrisLineStructure("2000", 20, 40, 10);
        MorrisLineStructure Data2 = new MorrisLineStructure("2001", 25, 45, 10);
        MorrisLineStructure Data3 = new MorrisLineStructure("2002", 10, 5, 15);

        Data.Add(Data1);
        Data.Add(Data2);
        Data.Add(Data3);

        var jsonSerializer = new JavaScriptSerializer();
        string data = jsonSerializer.Serialize(Data);


        ViewBag.Data = Data;

        return PartialView("_MorrisLines", data);

    }

主页视图

td id="MorrisLinetest">
        <div style="font-size:17px">Test Line Chart Template</div>
        @*@Html.DropDownList("SAExports", Year, "Select Year")*@
        <div id="Target7">  @Html.Action("ShowLineChart");</div>

    </td>

编辑：仍然没有设法弄清楚

如何调整Morris面积图上X轴点之间的距离？

0 个答案: