散点图未正确呈现答案

【问题标题】：scatter chart is not rendering properly散点图未正确呈现
【发布时间】：2016-05-09 19:45:34
【问题描述】：

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

{
    "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 轴。为什么会自动排序。

【问题讨论】：

标签： javascript angularjs fusioncharts

【解决方案1】：

在小提琴中，如果您检查 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",
       } //......

【讨论】：