zingchart - 如何在 ZingChart 中为 x 和 y 轴添加标题

Question

我想使用 ZingChart 为 x 和 y 轴添加标题。例如，如果我的 x 轴显示年份（2010、2011、2012 等），我希望标题“会计年度”显示在每个年份标签下方

同样，如果我在 y 轴上测量收入，我可能会在其中看到 1,000,000、2,000,000 等标签。我想在 y 轴上添加一个标题为“年收入”。

我在文档中找不到任何关于此的内容。

Answer 1

Martin 使用的链接是正确的，但是 JSON 语法指南中也有关于此的文档。http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/

var myChart = {
"graphset":[
    {
        "type":"mixed",
        "background-color":"#ffffff",
        "alpha":1,
        "title":{
            "text":"Browser Usage",
            "font-size":"20px",
            "font-weight":"bold",
            "font-color":"#000000",
            "background-color":"#ffffff",
            "margin-top":"15px",
            "margin-left":"15px",
            "margin-bottom":"10px",
            "text-align":"left"
        },
        "scale-x":{
            "line-width":"1px",
            "line-color":"#CCCCCC",
            "line-style":"solid",
            "values":["Jan","Feb","Mar","Apr","May","Jun","Jul"],
            "guide":{
                "line-width":"1px",
                "line-color":"#CCCCCC",
                "line-style":"solid"
            },
      "label":{
        "text":"Month",
        "font-size":"20px",
        "color":"red"
      },  
            "item":{
                "font-family":"helvetica",
                "font-color":"#CCCCCC",
                "font-weight":"bold",
                "font-size":"10px",
                "visible":true
            }
        },
        "scale-y":{
            "values":"0:50:10",
            "line-width":"1px",
            "line-color":"#CCCCCC",
            "line-style":"solid",
            "tick":{
                "visible":true,
                "line-color":"#CCCCCC",
                "placement":"outer",
                "size":"12px"
            },
            "item":{
                "font-color":"#CCCCCC",
                "font-weight":"bold",
                "font-size":"10px",
                "visible":true
            },
            "guide":{
                "line-width":"1px",
                "line-color":"#CCCCCC",
                "line-style":"solid"
            }
        },
        "tooltip":{
            "visible":true
        },
        "plot":{
            "alpha":1,
            "hover-state":{
                "visible":false
            }
        },
        "series":[
            {
                "type":"bar",
                "values":[47,32,37,48,28,27,32],
                "text":"Safari",
                "background-color":"#7eac10"
            }
        ]
    }
]
};

zingchart.render({
  id: "myChart",
  height: "300px",
  width: "100%",
  data: myChart
});

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>

您可能一直在搜索文档以查找标题。但是您可以通过将“标签”对象添加到您的 scale-x 和 scale-y 对象来完成您想做的事情，并用必要的属性填充它以使其与您的图表相匹配。

您可以随时右键单击 ZingChart 上的图表以查看来源。