javascript - 即使相同的代码适用于 highcharts jsfiddle,yAxis 上的小数也不会显示

标签 javascript highcharts velocity jsfiddle

我遇到了一些问题,我真的没有想法了,我的问题根源是这就是我发送到 highcharts 的内容,json 没有更改并且工作正常

    $(function() {
  var chart = new Highcharts.Chart(

  {
  "meta": {
    "drilldownEnabled": false
  },
  "chart": {
  renderTo:"container",
    "additionalData": {
      "dateTime": false,
      "datetype": "string",
      "cliccable": true,
      "drillable": false,
      "drillableChart": false,
      "isCockpit": true,
      "categoryColumn": "CATEGORY",
      "categoryGroupBy": "",
      "categoryGroupByNamens": "",
      "categoryName": "CATEGORY",
      "categoryOrderColumn": "",
      "categoryOrderType": "",
      "categoryStacked": "",
      "categoryStackedType": ""
    },
    "zoomType": "xy",
    "panning": true,
    "type": "line",
    "backgroundColor": "#FFFFFF",
    "heightDimType": "pixels",
    "widthDimType": "pixels",
    "plotBackgroundColor": null,
    "plotBorderWidth": null,
    "plotShadow": false,
    "borderColor": "#FFFFFF",
    "style": {
      "backgroundColor": "#FFFFFF",
      "fontFamily": "",
      "fontWeight": "",
      "fontSize": ""
    },
    "events": {}
  },
  "colors": [
    "#7cb5ec",
    "#434348",
    "#90ed7d",
    "#f7a35c",
    "#8085e9",
    "#f15c80",
    "#e4d354",
    "#2b908f",
    "#f45b5b",
    "#91e8e1"
  ],
  "title": {
    "text": "",
    "style": {
      "align": "",
      "color": "",
      "fontFamily": "",
      "fontSize": "",
      "fontWeight": ""
    }
  },
  "legend": {
    "itemDistance": 0,
    "symbolPadding": 25,
    "enabled": false
  },
  "xAxis": [
    {
      "plotBands": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {
            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0
        }
      ],
      "type": "category",
      "id": 0,
      "title": {
        "customTitle": false,
        "text": "CATEGORY",
        "style": {}
      },
      "labels": {

        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      }
    }
  ],
  "yAxis": [
    {
        allowDecimals:true,
      "plotBands": [
        {
          "label": {

            "text": "",
            "align": "center"
          },
          "color": "",
          "from": 0,
          "to": 0
        }
      ],
      "plotLines": [
        {
          "label": {

            "text": "",
            "align": "center"
          },
          "color": "",
          "dashStyle": "",
          "value": 0,
          "width": 0
        }
      ],
      "min": 0,
      "title": {
        "text": "NUMBER",
        "customTitle": false,
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": ""
        }
      },
      "labels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontSize": "",
          "fontWeight": ""
        },
        "align": ""
      },
      "gridLineDashStyle": "$convertedTypeline",
      "minorGridLineDashStyle": "$convertedMinorTpeline"
    }
  ],
  "series": [
    {
      "name": "NUMBER",
      "dataLabels": {
        "style": {
          "color": "",
          "fontFamily": "",
          "fontWeight": "",
          "fontSize": "",
          "fontStyle": ""
        },
        "enabled": true,
        "labelFormat": "{y:,.2f}"
      },
      "data": [
        {
          "drilldown": false,
          "y": 0.1,
          "name": "CLASSE 1",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 0.5,
          "name": "CLASSE 2",
          "datetype": "string"
        },
        {
          "drilldown": false,
          "y": 1.3,
          "name": "CLASSE 3",
          "datetype": "string"
        }
      ],
      "selected": true,
      "tooltip": {
        "valueDecimals": 2,
        "scaleFactor": "empty",
        "ttBackColor": "#FCFFC5"
      },
      "yAxis": 0
    }
  ],
  "tooltip": {
    "borderWidth": 0,
    "borderRadius": 0,
    "followTouchMove": false,
    "followPointer": true,
    "useHTML": true,
    "backgroundColor": null,
    "style": {
      "padding": 0
    }
  },
  "lang": {
    "noData": ""
  },
  "noData": {
    "style": {
      "fontFamily": "",
      "fontSize": "",
      "color": ""
    },
    "position": {
      "align": "center",
      "verticalAlign": "middle"
    }
  },
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "line": {
      "marker": {
        "symbol": "circle",
        "lineWidth": 2
      }
    },
    "series": {
      "events": {},
      "showCheckbox": true,
      "cursor": "pointer",
      "point": {
        "events": {}
      },
      "dataLabels": {
        "allowOverlap": true
      },
      "turboThreshold": 2000
    }
  }
}

  );
});

http://jsfiddle.net/JeLrb/520/ 请注意垂直轴上的小数值, 但由于某种未知的原因,当涉及到我的应用程序上的渲染时,小数不适用

enter image description here

我什至尝试添加例如tickInterval: 0.25,它确实将其分开,但它仍然再次显示1和1,然后再次显示1,如果我输入tickInterval: 0.50,它在yAxis上显示的数量减少了2倍,这意味着它确实有效,但它只是拒绝显示小数。

您知道可能出现什么问题吗? 也许是图书馆? 任何指导都会帮助我。 谢谢

最佳答案

我不知道为什么相同的图表选项在 jsfiddle 和您的环境中显示不同。但是,您可以使用 yAxis.labels.formatter 自定义 yAxis 标签功能。在那里您应该可以访问带小数的值。查看我在下面发布给您的演示。

  formatter: function() {
    return this.value.toFixed(2);
  }

演示:
http://jsfiddle.net/w23bgnvp/

关于javascript - 即使相同的代码适用于 highcharts jsfiddle,yAxis 上的小数也不会显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53813570/

相关文章:

javascript - 使用 jQuery 自定义 HTML 单选按钮

javascript - 使用 Highcharts 的 XY 轨迹图

java - 如何使用 Spring Properties 配置 Velocity Escape Tool?

jquery - 触发 mousedown 并在事件中包含 e.which

java - 速度 : Turning off Strict mode in apache velocity

java - VelocityEngineUtils 已在 Spring 3.2 中删除,那么还有什么可以使用的呢?

javascript - JS Fiddle 打印/警报

javascript - 一次合并两个 Javascript 数组三个元素

javascript - 获取小元素索引直到数组长度

javascript - 在 highcharts 中,是否可以在柱形图中制作一个条形图,其顶部与图表边框的图表区域 "on top"的边缘接壤?