ZingChart預覽位置和着色

我是Zingchart的新手，我遇到了一些問題。ZingChart預覽位置和着色

我想要一個帶有第二個圖表（或這裏預覽）的堆疊條形圖。

1.）我有問題的堆疊，當我爲它設置一個顏色，我沒有看到圖表中的差異 - 爲什麼？ - （是否可以將顏色應用於每個單獨的條塊堆棧？）

2）如果我單擊背景但不在數據集上，則只能縮放。由於我設置了很多數據，我無法縮放。我能做些什麼，我可以在充滿數據的圖表上應用縮放？

3.）如何正確設置預覽/圖表的位置？無論我如何設置preview.position，只有y改變，而不是高度或x值。這也是愚蠢的，因爲我無法看到預覽的正確句柄。也試圖用邊緣來調整它，但也沒有成功。我想要在大圖上進行預覽。

 "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": [{

來源

2015-11-04 TestModus

看起來你選擇了一個相當複雜的圖表從我們的圖庫上測試！讓我用簡單的圖表向您展示一些示例。

您可以通過在每個系列對象上設置backgroundColor來設置堆疊的顏色。在系列對象中，我們也可以添加一個hoverState對象來控制鼠標懸停的顏色。
開箱即可通過單擊並拖動背景來控制縮放。您可以使用預覽窗口，也可以掛入zoom methods of the api以創建放大圖表的功能。。您可以在庫外部的外部div中使用這些方法，或者監聽node_click事件並在其上附加縮放方法以複製您嘗試實現的內容。
可以使用預覽對象內的位置和邊距屬性修改預覽窗口的位置。

我在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>

來源

2015-11-04 00:50:19

ZingChart預覽位置和着色

回答

相關問題