代码之家  ›  专栏  ›  技术社区  ›  Codemonkey

highcharts中的多个直方图导致第二个直方图上的仓位间距出现问题?

  •  0
  • Codemonkey  · 技术社区  · 8 年前

    我试图在同一张图表上绘制两组数据及其对应的直方图。不幸的是,结果是其中一个直方图的箱子之间存在间隙。

    有人知道如何解决这个问题吗?记住数据是动态的,所以我不想显式设置任何箱子宽度等。

    http://jsfiddle.net/uwq9k7Lg/

    JS:

    Highcharts.chart('container', {
                xAxis: [{
                }, {                
                }, {
                }],
                yAxis: [{
                }, {
                }],
                series: [{
                    type: 'histogram',
                    xAxis: 2,
                    yAxis: 1,
                    baseSeries: 's1'
                }, {
                    type: 'histogram',
                    xAxis: 2,
                    yAxis: 1,
                    baseSeries: 's2'
                }, {
                    id: 's1',
                    type: 'scatter',
                    data: [1540.05,1532.99,1880.28,1477.81,1585.73,1517.52,1986.31,1469.12,1314.68,1769.32,1438.85,1559.51,1712.68,1539.97,1253.89,1830.8,1496.05,1490.26,1671.14,2442.06,1553.05,1493.59,1563.03,1486.62,1802.82,1373.39,1754.35,1525.61,1546.15,1505.9,1457.14,1800.56,1481.7,1349.72,2125.55,1621.02,1689.52,1685.67,1778.98,1698.82,1921.13,1520.81,1566.14,2372.76,1419.91,1796.7,1621.19,1816.31,1528.85,1342.83,2481.26,1694.68,1657.92,1457.89,1414.73,1857.76,1715.27,1530.2,1553.69,2890.06,1632.14,1419.08,1449.88,1414.45,1600.4,1473.22,1745.77,2536.96,1625.38,1788.98,1502.14,1414.55,1491.99,1389.6,1606.47,1865.12,2281.73,1466.92,1485.69,1492.09,2272.98,1656.43,1562.23,2229.11,1732.37,1466.74,1428.72,1209.87,1459.51,1618.47,1720.35,1660.64,1479.19,1425.42,1549.53,1645.3,1602.82,1608.41,1749.81,1714.55,1679.14,1791.71,1490.59,1928.39,1586.32,1494.97,1550.52,2608.26,1512.23,1804.93,1799.76,2493.59,2105.95,1765.73,1176.89,1789.19,1257.6,1701.47,1445.61,2308.24,1644.9,1590.58,2272.31,1449.72,1802.39,1385.58,1402.27,1562.01,1593.6,1585.58,1351.67,1563.42,1689.95,1332.75,2055.39,1567.86,1918.89,1669.67,1521.49,1936.59,1646.44,1735.57,1512.26,1727.84,1398.51,1437.52,1395.86,1704.65,1691.25,2436.58,1474.62,1971.48,1453.26,1274.71,1908.51]
                }, {
                    id: 's2',
                    xAxis: 1,
                    type: 'scatter',
                    data: [1796.39,1819.96,1644.75,1682.29,1664.81,2122.26,1442.42,1748.17,2099.26,1866.1,1466.9,2090.13,1502.34,1760.46,2279.47,1565.06,2104.19,1707.06,1827.82,1989.51,1899.41,1836.86,1633.83,2633.47,1860.75,2582.93,1500.57,2213.11,1417.45,1671.14,2305.97,3002.58,1802.91,1978.37,1914.84,1688.79,1967.32,1622.43,1705.98,1911.45,2040.99,2404.06,1788.33,1540.64,1900.35,1822.32,1995.54,2837.06,1840.97]
                }]
            });
    

    非常感谢。

    1 回复  |  直到 8 年前
        1
  •  0
  •   Core972    8 年前

    只要换个颜色就行了 xAxis 设定 borderWith:0

    ...
      xAxis: [{}, {}, {}, {}], // new xAxis
    ...
    {
    type: 'histogram',
       xAxis: 3, // Use the new added xAxis
       yAxis: 1,
       baseSeries: 's2',
       borderWidth: 0 // Remove the line around the bins
    }
    

    Fiddle

    推荐文章