highcharts col宽度和border-top

Question

您好我有highcharts图和一些问题。

1）如何将列的宽度设置为月份的宽度？ （我尝试在CSS中改变“宽度”它没有用）

2）如何删除所有边框，但顶部边框保存？ （我尝试在CSS中改变“stroke-width”它没有用）

也许有些js配置解决方案适合它？

我使用答案更新帖子，这是有用的！谢谢大家。

Highcharts.chart('container', {

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 54.4, 54.4],
        type: 'column'
    }],
    
    plotOptions: {
      column: {
      pointPadding: 0,
      groupPadding: 0,
      borderWidth: 0
      } 
	}

});

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

.highcharts-series rect {
    stroke-dasharray: 45, 1000;
    stroke-width: 3;
    stroke: #00ff00;
}

.highcharts-grid path {
display: none;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

Answer 1

您可以使用pointWidth设置宽度：

plotOptions: {
        series: {
            pointWidth: 40
        }
    },

您可以使用以下内容删除网格线：

yAxis: [{
            gridLineWidth: 0,
            minorGridLineWidth: 0
}],

查看：

Highcharts.chart('container', {

   yAxis: [{
            gridLineWidth: 0,
            minorGridLineWidth: 0
}],
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

plotOptions: {
    series: {
        pointWidth: 40
    }
},

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }]

});

#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>

Answer 2

可以使用pointPadding: 0和groupPadding: 0来解决宽度。

Highcharts.chart('container', {

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }],
    
    plotOptions: {
      column: {
      pointPadding: 0,
      groupPadding: 0,
      borderWidth: 0
      } 
	}

});

#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>

然后你可以添加：

yAxis: [{
   gridLineWidth: 0,
   minorGridLineWidth: 0
}],

正如@Alex在他的回答中所做的那样删除了边框和线条。

Answer 3

您可以通过将chart: {width: WIDTH},键值对添加到options对象来指定图表的宽度，如下所示。

对于图表的边框，没有配置。你需要像我在下面的代码片段中那样为容器div添加样式

＆＃13;

＆＃13;

Highcharts.chart('container', {
    chart: {
        width: 300
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }]

});

＆＃13;

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="border-top: thin solid black" ></div>

＆＃13;

＆＃13;

＆＃13;