在dojo图表中自定义x轴标签和工具提示

时间:2012-03-07 16:18:02

标签: charts dojo label

我的json看起来像这样

var jStore = {
    "   identifier": "cpu",
    "items": [
        {
            "Time": "02:52",
            "Used": 100,
            "Idle": 0
        },
        {
            "Time": "02:57",
            "Used": 100,
            "Idle": 0
        }....
 ]
};

我创建了一个数据存储区并添加到图表中

var realStore =  new dojo.data.ItemFileReadStore({data: jStore});
var Ser = new dojox.charting.DataSeries(realStore, {query: {Idle: "*"}     }, "Idle");
var Ser1 = new dojox.charting.DataSeries(realStore, {query: {Used: "*"}     }, "Used");

chart.addAxis("x");
chart.addAxis("y", {  vertical: true, fixLower: "major", fixUpper: "major" });

            chart.addSeries("Used ",Ser);
                chart.addSeries("Idle",Ser1);

图表正确呈现,但xaxis值默认采用(1,2,3 ..)。 但我需要在我的json中将轴值作为时间。 Xaxis应该像02:52,02:54,02:56

同样在工具提示中,它仅显示我给出的系列值。但我想添加值+ xaxis值。例如,在02:54说100。 有人可以帮我解决这个问题。

1 个答案:

答案 0 :(得分:2)

您可以为每个值指定自定义标签,如下所示:

mychart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
                                font: "normal normal 10pt Arial",
                                 labels: [{value: 1, text: "Q2 FY11"},
                                          {value: 2, text: "Q3 FY11"},
                                        {value: 3, text: "Q4 FY11"},
                                        {value: 4, text: "Q1 FY12"}]
                                });

您还可以按如下方式指定自定义工具提示文本:

mychart.addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]);

在您使用商店的情况下,为商店提供的JSON需要为每个值提供“工具提示”属性 - 道场将使用它来填充工具提示