Highcharts:混合样条和条形图

时间:2017-04-04 11:33:29

标签: charts highcharts bar-chart spline

我在图表中使用样条曲线和列系列。现在,我想将列系列更改为条形系列,以将垂直线显示为水平。

这是颠倒我的轴。

无论如何都要使这些线条水平?

Highcharts.chart('container', {
  "chart": {
    "type": "spline",
    "height": 300,
    "zoomType": "xy"
  },
  "title": {
    "text": ""
  },
  "credits": {
    "enabled": false
  },
  "legend": {
    "enabled": true
  },
  "colors": [
    "#002088",
    "#ff8500"
  ],
  "tooltip": {
    "borderColor": "#000",
    "useHTML": true
  },
  "xAxis": {
    "title": {
      "text": "Number of Claims"
    },
    "labels": {}
  },
  "yAxis": {
    "title": {
      "text": "Probability"
    },
    "labels": {},
    "lineWidth": 1,
    "maxPadding": 0,
    "endOnTick": false
  },
  "plotOptions": {
    "spline": {
      "marker": {
        "enabled": false
      }
    }
  },
  "series": [
    {
      "name": "Industry",
      "data": [
        [
          46,
          0.013879472337213497
        ],
        [
          165,
          0.002849711600336534
        ],
        [
          166,
          0.002896658163751903
        ],
        [
          167,
          0.0029434529488722994
        ],
        [
          168,
          0.002990074755099845
        ],
        [
          169,
          0.0030365025283147335
        ],
        [
          170,
          0.00308271537804997
        ],
        [
          171,
          0.0031286925942566237
        ],
        [
          172,
          0.003174413663658321
        ],
        [
          436,
          0.0006901218984042849
        ],
        [
          437,
          0.0006786634571210209
        ],
        [
          440,
          0.0006452354560864465
        ]
      ]
    },
    {
      "type": "column",
      "data": [
        [
          260,
          0.004588135275212907
        ]
      ],
      "name": "Median",
      "pointPadding": -1,
      "color": "#c111a0",
      "showInLegend": false
    },
    {
      "type": "column",
      "data": [
        [
          327,
          0.002928596327127904
        ]
      ],
      "name": "75th Percentile",
      "pointPadding": -1,
      "color": "#c111a0",
      "showInLegend": false
    },
    {
      "type": "column",
      "data": [
        [
          440,
          0.0007925831749776477
        ]
      ],
      "name": "95th Percentile",
      "pointPadding": -1,
      "color": "#c111a0",
      "showInLegend": false
    },
    {
      "name": "Selected",
      "data": [
        [
          46,
          0
        ],
        [
          47,
          0
        ],
        [
          48,
          0
        ],
        [
          49,
          0
        ],
        [
          50,
          0
        ],
        [
          51,
          0
        ],
        [
          52,
          0
        ],
        [
          53,
          0
        ],
        [
          54,
          0
        ],
        [
          55,
          0.000005345727029618698
        ],
        [
          56,
          0.000012520651672094743
        ],
        [
          57,
          0.000019317396081268134
        ],
       
        [
          432,
          0.0008935172080912831
        ],
        [
          433,
          0.0008805110862888815
        ],
        [
          434,
          0.0008672686693626686
        ],
        [
          435,
          0.0008540897924446664
        ],
        [
          436,
          0.0008412243445464023
        ],
        [
          437,
          0.0008285745342571036
        ],
        [
          438,
          0.0008161882417630351
        ],
        [
          439,
          0.0008042673735397179
        ],
        [
          440,
          0.0007925831749776476
        ]
      ],
      "color": "#c111a0"
    },
    {
      "type": "scatter",
      "data": [
        [
          273.04376388698086,
          0.004258785966493362
        ]
      ],
      "name": "Mean",
      "marker": {
        "symbol": "circle"
      },
      "color": "#c111a0",
      "showInLegend": false
    }
  ]
});
#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

0 个答案:

没有答案