ZingChart Предварительный просмотр Положение и раскраска

Question

Я новичок в Zingchart, и у меня есть некоторые проблемы с ним.

Я хочу сложную гистограмму со вторым графиком (или здесь предварительный просмотр).

1.) У меня проблема с укладкой, когда я устанавливаю для нее цвет, я не вижу разницы в диаграмме - почему ?. - (Можно ли применить цвет к каждому стеку бара?)

2.) Это можно увеличить, если я нажму на фон, но не на набор данных. Поскольку я установил много данных, я не могу масштабировать. Что я могу сделать, что я могу применить масштаб на графике, заполненном данными?

3.) Как правильно установить положение предварительного просмотра/диаграммы? Независимо от того, как я устанавливаю preview.position, изменяется только y, а не высота или x-значение. Это тоже глупо, потому что я не вижу правильной Руки предварительного просмотра. Также попытался настроить его с запасом, но не удался. Я хочу Предварительный просмотр на верхней части большой диаграммы.

Вот что я играю с: http://jsfiddle.net/z1zwg6ae/1/

 "graphset": [{ 
    "type": "bar", 
     "x": "1%", 
     "y": "25%", 
     "height": "100%", 
     "background-color": "#fff", 

     "plot": { 
     "stacked": true, 
      "stack-type": "100%" 
    }, 

     "scale-x": { 
     "line-color": "#555", 
      "line-width": "4px", 

      "zooming": true, 
      "guide": { 
      "visible": false 
     }, 
      "tick": { 
      "line-color": "#333", 
     } 
    }, 
     "chart": { 
     "position": "0 0" 

    }, 
     "scale-y": { 
     "min-value": 0, 
      "max-value": 100 
    }, 
     "scroll-x": { 
     "bar": { 
      "background-color": "#777" 
     }, 
      "handle": { 
      "background-color": "#76DF20" 
     } 
    }, 
     "zoom": { 
     "background-color": "#20DFC6" 
    }, 
     "plot": { 
     "line-width": 10, 
      "max-trackers": 9999, 
      "mode": "normal", 
      "js-rule": "myfunc()", 
      "shadow": false, 
      "marker": { 
      "type": "none" 
     } 
    }, 
     "preview": { 
     "height": 100, 
      "position": "200 100", 
      "width": "90%" 
    }, 

     "plotarea": { 
     "adjust-layout": true, 
      "margin-right": 35 
    }, 
     "series": [{ 

Answer 1

Похоже, вы выбрали довольно сложную схему из нашей галереи, чтобы проверить на! Позвольте мне показать вам несколько примеров на более простой диаграмме.

1. Вы можете установить сложный цвет, установив backgroundColor на каждый объект серии. Внутри объекта серии мы можем добавить объект hoverState для управления цветом мыши.

2. Управление масштабированием можно изменять только нажатием и перетаскиванием фона. Вы можете либо использовать окно предварительного просмотра, либо подключиться к zoom methods of the api, чтобы создать функциональность для увеличения масштаба. , Вы можете использовать эти методы во внешнем div вне библиотеки или прослушать событие node_click и приложить к нему метод масштабирования, чтобы воспроизвести то, что вы пытаетесь достичь.

3. Позиционирование окна предварительного просмотра может быть изменено с использованием атрибутов позиции и поля в объекте предварительного просмотра.

Я нахожусь в команде ZingChart, поэтому не стесняйтесь обращаться к нам с дальнейшими вопросами!

var myConfig = { 
 
    type: "bar", 
 
    plot:{ 
 
    stacked:true, 
 
    stackType:"normal" 
 
    }, 
 
    preview : { 
 
    position : "50% 0%", 
 
    margin : "10 50 80 50", 
 
    height: 50 
 
    }, 
 
    plotarea : { 
 
    margin : "90 50 50 50" 
 
    }, 
 
    scaleX : { 
 
    zooming : true 
 
    }, 
 
    scaleY : { 
 
    zooming : true 
 
    }, 
 
    series: [ 
 
    { 
 
     values :[20,40,25,50,15,45,33,34], 
 
     backgroundColor : "#3386ff", 
 
     hoverState :{ 
 
     backgroundColor : "#2c61ad", 
 
     } 
 
    }, 
 
    { 
 
     values:[5,30,21,18,59,50,28,33], 
 
     backgroundColor : "#1963bc", 
 
     hoverState :{ 
 
     backgroundColor : "#4988e4", 
 
     } 
 
    }, 
 
    { 
 
     values:[30,5,18,21,33,41,29,15], 
 
     backgroundColor : "#44d0e9", 
 
     hoverState :{ 
 
     backgroundColor : "#a6f1ff", 
 
     } 
 
    } 
 
    ] 
 
}; 
 

 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: 400, 
 
\t width: 600 
 
});

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>