Пространство панели ZingChart не работает

Я визуализирую zingchart со следующими данными:

{
"graphset":[
    {
        "type":"bar",
        "plotarea":{
            "adjust-layout":true,
            "mask-tolerance":[0,0]
        },
        "background-color":"#fff",
        "plot":{
            "alpha":0.9,
            "border-width":1,
            "stacked":true,
            "border-color":"black",
            "cursor":"pointer",
            "border-radius-top-left":4,
            "border-radius-top-right":4,
            "bar-width":"20px",
            "line-width":2,
            "bar-space":"50px",
            "background-fit":"x",
            "animation":{
                "effect":"ANIMATION_SLIDE_BOTTOM"
            },
            "hover-state":{
                "alpha":1,
                "visible":true
            }
        },
        "scale-x":{
            "zooming":true,
            "label":{
                "text":"Location",
                "font-color":"#000",
                "font-size":"16px",
                "text-align":"center",
                "background-color":"#fff",
                "width":"100%",
                "position":"absolute",
                "bottom":"0"
            },
            "values":[" HYDERABAD"," GURGAON"," JAIPUR"],
            "line-color":"#CCC",
            "tick":{
                "line-color":"#a6a6a6",
                "line-width":1,
                "visible":0
            },
            "guide":{
                "line-color":"#666",
                "line-style":"solid"
            },
            "item":{
                "font-family":"arial",
                "font-color":"#000",
                "width":"190px",
                "text-align":"center",
                "background-color":"rgb(255,255,255)",
                "padding-top":"4px"
            }
        },
        "scale-y":{
            "zooming":true,
            "label":{
                "text":"Attrition Rate",
                "font-color":"#2B776C",
                "font-size":"16px"
            },
            "line-color":"#CCC",
            "tick":{
                "visible":false
            },
            "guide":{
                "line-style":"dashed",
                "line-color":"#ccc"
            },
            "item":{
                "font-family":"arial",
                "font-color":"#8B8B8B"
            },
            "zoom-to":[32.5,34.5]
        },
        "series":[
            {
                "values":[33.59,33.36,32.93],
                "stack":1,
                "background-color":"#ff3b3b",
                "line-color":"#ff3b3b",
                "marker":{
                    "background-color":"#ff3b3b",
                    "size":3
                },
                "value-box":{
                    "font-color":"#ff3b3b",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff3b3b",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 30 Days for location %kl"
                },
                "palette":0
            },
            {
                "values":[33.5,33.08,32.93],
                "stack":2,
                "background-color":"#ff9b67",
                "line-color":"#ff9b67",
                "marker":{
                    "background-color":"#ff9b67",
                    "size":4
                },
                "value-box":{
                    "font-color":"#ff9b67",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff9b67",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 30 Days for location %kl"
                },
                "palette":1
            },
            {
                "values":[32.91,33.55,34.15],
                "stack":3,
                "background-color":"#6cebb3",
                "line-color":"#6cebb3",
                "marker":{
                    "background-color":"#6cebb3",
                    "size":5
                },
                "value-box":{
                    "font-color":"#6cebb3",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#6cebb3",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 30 Days for location %kl"
                },
                "palette":2
            },
            {
                "values":[32.78,33.33,33.78],
                "stack":4,
                "background-color":"#ff3b3b",
                "line-color":"#ff3b3b",
                "marker":{
                    "background-color":"#ff3b3b",
                    "size":3
                },
                "value-box":{
                    "font-color":"#ff3b3b",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff3b3b",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 60 Days for location %kl"
                },
                "palette":3
            },
            {
                "values":[34.04,33.63,32.93],
                "stack":5,
                "background-color":"#ff9b67",
                "line-color":"#ff9b67",
                "marker":{
                    "background-color":"#ff9b67",
                    "size":4
                },
                "value-box":{
                    "font-color":"#ff9b67",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff9b67",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 60 Days for location %kl"
                },
                "palette":4
            },
            {
                "values":[33.19,33.04,33.29],
                "stack":6,
                "background-color":"#6cebb3",
                "line-color":"#6cebb3",
                "marker":{
                    "background-color":"#6cebb3",
                    "size":5
                },
                "value-box":{
                    "font-color":"#6cebb3",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#6cebb3",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 60 Days for location %kl"
                },
                "palette":5
            },
            {
                "values":[33.76,32.58,33.51],
                "stack":7,
                "background-color":"#ff3b3b",
                "line-color":"#ff3b3b",
                "marker":{
                    "background-color":"#ff3b3b",
                    "size":3
                },
                "value-box":{
                    "font-color":"#ff3b3b",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff3b3b",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 90 Days for location %kl"
                },
                "palette":6
            },
            {
                "values":[32.76,33.98,33.78],
                "stack":8,
                "background-color":"#ff9b67",
                "line-color":"#ff9b67",
                "marker":{
                    "background-color":"#ff9b67",
                    "size":4
                },
                "value-box":{
                    "font-color":"#ff9b67",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#ff9b67",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 90 Days for location %kl"
                },
                "palette":7
            },
            {
                "values":[33.49,33.43,32.71],
                "stack":9,
                "background-color":"#6cebb3",
                "line-color":"#6cebb3",
                "marker":{
                    "background-color":"#6cebb3",
                    "size":5
                },
                "value-box":{
                    "font-color":"#6cebb3",
                    "visible":true
                },
                "tooltip":{
                    "background-color":"#6cebb3",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 90 Days for location %kl"
                },
                "palette":8
            }
        ]
    }
]
}

Я дал bar-space 50px, но его бары близки друг к другу следующим образом

моя диаграмма

Интересно, как давать поля внутри баров?


javascript charts zingchart
person Akhilesh Kumar    schedule 25.04.2016    source источник
comment
Поищите в документации плагинов, вы найдете class, которые вы можете переопределить.   -  person Tushar    schedule 25.04.2016
comment
Я искал и пробовал много комбинаций, но безрезультатно.   -  person Akhilesh Kumar    schedule 25.04.2016

Ответы (1)


arrow_upward
3
arrow_downward

В настоящее время я являюсь членом команды ZingChart и рассмотрел ваш запрос. После небольшого копания и тестирования вы правы, «bar-space» не регулирует поля между барами. Похоже, что «bar-width» и «bar-space» не могут сосуществовать друг с другом в нашей библиотеке прямо сейчас. Чтобы сохранить динамический размер столбцов, требуется много вычислений, в то время как разрешить пользователям одновременно настраивать оба атрибута непросто. Я хотел бы спросить, какого вида вы пытаетесь добиться с этими настройками? Я убрал некоторые излишки в вашем JSON, сделав его намного меньше. В этом демонстрационном графике отсутствуют атрибуты «bar-width» и «bar-space». При поведении по умолчанию ваша диаграмма будет выглядеть так: http://demos.zingchart.com/view/O3M6RCTF< /а>

У меня есть прикрепленный JSON здесь:

{
"graphset":[
  {
      "type":"bar",
      "plotarea":{
        "adjust-layout":true,
        "mask-tolerance":[0,0]
      },
      "background-color":"#fff",
      "plot":{
          "alpha":0.9,
          "border-width":1,
          "border-color":"black",
          "cursor":"pointer",
          "border-radius-top-left":4,
          "border-radius-top-right":4,
          "animation":{
              "effect":"ANIMATION_SLIDE_BOTTOM"
          },
          "hover-state":{
              "alpha":1,
              "visible":true
          },                
          valueBox:{},
          tooltip:{
              "border-color":"#fff",
              "border-width":1,
              "border-radius":3,
              "wrap-text":true,
              "alpha":0.8,
              "text":"%node-value % chances in %data-timespan Days for location %kl"
          }
      },
      "scale-x":{
          "zooming":true,
          "label":{
              "text":"Location",
              "font-color":"#000",
              "font-size":"16px",
              "text-align":"center",
              "background-color":"#fff",
              paddingTop:20
          },
          "values":[" HYDERABAD"," GURGAON"," JAIPUR"],
          "line-color":"#CCC",
          "tick":{
              "visible":false
          },
          "guide":{
              "line-color":"#666",
              "line-style":"solid"
          },
          "item":{
              "font-family":"arial",
              "font-color":"#000",
              "background-color":"rgb(255,255,255)",
              "padding-top":"4px"
          }
      },
      "scale-y":{
          "zooming":true,
          "label":{
              "text":"Attrition Rate",
              "font-color":"#2B776C",
              "font-size":"16px"
          },
          "line-color":"#CCC",
          "tick":{
              "visible":false
          },
          "guide":{
              "line-style":"dashed",
              "line-color":"#ccc"
          },
          "item":{
              "font-family":"arial",
              "font-color":"#8B8B8B"
          },
          "zoom-to":[32.5,34.5]
      },
      "series":[
          {
              "values":[33.59,33.36,32.93],
              "background-color":"#ff3b3b",
              "line-color":"#ff3b3b",
              'data-timespan':30
          },
          {
              "values":[33.5,33.08,32.93],
              "background-color":"#ff9b67",
              "line-color":"#ff9b67",
              'data-timespan':30
          },
          {
              "values":[32.91,33.55,34.15],
              "background-color":"#6cebb3",
              "line-color":"#6cebb3",
              'data-timespan':30
          },
          {
              "values":[32.78,33.33,33.78],
              "background-color":"#ff3b3b",
              "line-color":"#ff3b3b",
              'data-timespan':60
          },
          {
              "values":[34.04,33.63,32.93],
              "background-color":"#ff9b67",
              "line-color":"#ff9b67",
              'data-timespan':60
          },
          {
              "values":[33.19,33.04,33.29],
              "background-color":"#6cebb3",
              "line-color":"#6cebb3",
              'data-timespan':60
          },
          {
              "values":[33.76,32.58,33.51],
              "background-color":"#ff3b3b",
              "line-color":"#ff3b3b",
              'data-timespan':90
          },
          {
              "values":[32.76,33.98,33.78],
              "background-color":"#ff9b67",
              "line-color":"#ff9b67",
              'data-timespan':90
          },
          {
              "values":[33.49,33.43,32.71],
              "background-color":"#6cebb3",
              "line-color":"#6cebb3",
              'data-timespan':90
          }
      ]
  }

] } ` Мы собираемся устранить эту незначительную ошибку, но мы очень заняты тем, что скоро выйдет новая сборка. Я не думаю, что это сделает эту сборку. Тем временем, если у вас есть адрес электронной почты, с которым вы предпочитаете связываться, мы будем рады оставаться на связи и держать вас в курсе. Мы не хотим спамить этот вопрос обновлениями прогресса, просто решением.

person nardecky    schedule 25.04.2016
comment
Но я думаю, что bar-space и bar-width очень часто могут появляться у пользователя одновременно. Так что будем ждать обновления и будем на связи по почте: [email protected] - person Akhilesh Kumar; 26.04.2016
comment
@AkhileshKumar Вчера мы выпустили новую сборку. Журнал изменений здесь. Мы обновили логику bar-space и bar-width. Поделитесь с нами вашими мыслями! - person nardecky; 07.07.2016