在 ZingChart 上自定义 x-axis

Question

我想使用 ZingChart 绘制一个与此类似的图表： r-graph

到目前为止我能做的最好的是： zing-graph

来源：

{ 
  "graphset": [{
    "type": "line",
    "series": [
        {
            "values":[[1,218.2], [2,121.7], [4,62.27], [8,34.37], [16,19.79], [20,16.52], [32,17.1], [40,16.11], [64,91.9]]
        }
    ],
    "scale-x":{
        "values":[1,2,4,8,16,20,32,40,64]
    }
  }]
}

如何固定 x-ticks 的位置与 x-values 的位置相同？

Answer 1

您首先要在 scale-x 对象中设置 max-items 和 items-overlap 属性，以强制显示比例尺上的所有项目。

"scale-x":{
    "max-items":9999, //forces all items 
    "items-overlap":true, //forces items (labels) to show even when overlapping
    /* Code truncated for brevity */

之后，将 item 对象和 tick 对象中的 alpha（透明度）设置为 0 以隐藏所有刻度和项目。通过在 item 和 tick 中的 rules 数组中配置一个对象来仅启用您想要显示的项目，以显示所需的比例值。

"item":{
    "alpha":0,
    "rules":[
        {
           "rule":"%scale-value == 1 || %scale-value == 4 || %scale-value == 8 || %scale-value == 16 || %scale-value == 20 || %scale-value == 32 || %scale-value == 40 || %scale-value == 64",
           "alpha":1
        }
     ]
},

我是 ZingChart 团队的一员。请查看 this demo 并告诉我是否可以回答有关其工作原理的更多问题。

在 ZingChart 上自定义 x-axis

Customize x-axis on ZingChart

javascript

visualization

zingchart