Как отрегулировать расстояние между точками оси X на карте Морриса? - PullRequest
Новая
       12

Как отрегулировать расстояние между точками оси X на карте Морриса?

0 голосов
/ 03 апреля 2019

Я пытаюсь поместить область Морриса в квадрат на моей веб-странице MVC, однако, когда я строю диаграмму с тестовыми данными, ось 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}

enter image description here

размер таблицы, содержащей диаграмму, также можно изменить.так как другая таблица строится динамически, есть ли способ, которым я мог бы также скорректировать диаграмму, если бы это произошло так же хорошо?

Дополнительная информация Этот 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>

РЕДАКТИРОВАТЬ: все ещене удалось выяснить это

...