散点图无法正确渲染

时间:2016-02-01 11:16:36

标签: javascript angularjs fusioncharts

我正在使用fusioncharts库。我无法找到我为scatter图表发送的数据有什么问题。

演示 - JSFiddle

{
    "chart": {
        "animation": 0,
        "yaxisname": "OAE (%)",
        "xaxisname": "Week",
        "xaxismaxvalue": 54,
        "xaxisminvalue": 0,
        "showregressionline": "1",
        "regressionlinethickness": "2",
        "regressionLineColor": "008ee4",
        "bgcolor": "FFFFFF",
        "canvasborderthickness": "1",
        "canvasbordercolor": "CCCCCC",
        "showalternatehgridcolor": "0",
        "divlineColor": "#FFFFFF",
        "showLegend": "1",
        "showValues": "1"
    },
    "categories": [{
        "verticallinecolor": "c7c7c7",
        "category": [{
            "label": "46",
            "x": "46",
            "showverticalline": "1"
        }, {
            "label": "47",
            "x": "47",
            "showverticalline": "1"
        }, {
            "label": "48",
            "x": "48",
            "showverticalline": "1"
        }, {
            "label": "49",
            "x": "49",
            "showverticalline": "1"
        }, {
            "label": "50",
            "x": "50",
            "showverticalline": "1"
        }, {
            "label": "51",
            "x": "51",
            "showverticalline": "1"
        }, {
            "label": "52",
            "x": "52",
            "showverticalline": "1"
        }, {
            "label": "53",
            "x": "53",
            "showverticalline": "1"
        }, {
            "label": "01",
            "x": "01",
            "showverticalline": "1"
        }, {
            "label": "02",
            "x": "02",
            "showverticalline": "1"
        }, {
            "label": "03",
            "x": "03",
            "showverticalline": "1"
        }, {
            "label": "04",
            "x": "04",
            "showverticalline": "1"
        }]
    }],
    "dataset": [{
        "seriesname": "Target",
        "color": "93cc1a",
        "regressionLineColor": "93cc1a",
        "showValues": "0",
        "anchorradius": "0",
        "anchorSides": "8",
        "regressionLineThickness": "5",
        "anchorBorderColor": "2A612D",
        "anchorBgColor": "93cc1a",
        "data": [{
            "y": "40%",
            "x": "46"
        }, {
            "y": "40%",
            "x": "47"
        }, {
            "y": "40%",
            "x": "48"
        }, {
            "y": "40%",
            "x": "49"
        }, {
            "y": "40%",
            "x": "50"
        }, {
            "y": "40%",
            "x": "51"
        }, {
            "y": "40%",
            "x": "52"
        }, {
            "y": "40%",
            "x": "53"
        }, {
            "y": "40%",
            "x": "01"
        }, {
            "y": "40%",
            "x": "02"
        }, {
            "y": "40%",
            "x": "03"
        }, {
            "y": "40%",
            "x": "04"
        }]
    }, {
        "seriesname": "OAE",
        "color": "008ee4",
        "anchorradius": "5",
        "anchorSides": "7",
        "anchorBorderColor": "008ee4",
        "anchorBgColor": "008ee4",
        "data": [{
            "y": "29.73",
            "x": "46"
        }, {
            "y": "100.36",
            "x": "47"
        }, {
            "y": "69.37",
            "x": "48"
        }, {
            "y": "55.55",
            "x": "49"
        }, {
            "y": "64.4",
            "x": "50"
        }, {
            "y": "135.43",
            "x": "51"
        }, {
            "y": "55.02",
            "x": "52"
        }, {
            "y": "NA",
            "x": "53"
        }, {
            "y": "NA",
            "x": "01"
        }, {
            "y": "73.36",
            "x": "02"
        }, {
            "y": "8.28",
            "x": "03"
        }, {
            "y": "137.91",
            "x": "04"
        }],
        "dashed": "1"
    }]
}

您可以看到图表X轴之间有空格。此外,我希望该图表应该绘制X轴,因为我在类别对象中传递。为什么它会自动排序。

1 个答案:

答案 0 :(得分:0)

在小提琴中,如果检查x轴范围的最小值01-04和最大值46到52。

因为04和46之间没有任何标签,中间的空格是空的。图表实际上是从01到52绘制的,其间没有值的空格或标签不会被跳过。

您可以使用label实现所需目标。它只是一个解决方案。

Updated Fiddle

"categories": [{
   "verticallinecolor": "c7c7c7",
      "category": [{
         "label": "46",
          "x": "0",
          "showverticalline": "1"
       }, {
          "label": "47",
          "x": "1",
          "showverticalline": "1",
       } //......