几个月之间需要完整的图表 [英] Need full highchart bars between months

问题描述

我已经创建了高图来完全满足我的要求，如所附的图像所示，并且我尝试了下面的小提琴代码 小提琴中的示例代码如下

I have created High chart to full fill my requirement as shown in attached Image and i have tried below code in fiddle example code in fiddle is as follows

https://jsfiddle.net/vsLr07ak/

下面是我的代码

   Highcharts.chart('container', {
 chart: {
    type: 'column'
 },
 title: {
    text: 'HISTORICAL NEWS SENTIMENT'
 },
  yAxis: {
    title: {
        text: ''
    },
     labels: {
            enabled: false
        },
    min: -100,
    max: 100,
    tickInterval: 10,
    showLastdataLabel: true,
  },
  xAxis: {
    categories: ['26. Nov', '24. Dec', '21. Jan', '18. Feb', '18. March']
  },
  credits: {
    enabled: false
  },
  series: [{
    name: null,
    data: [15, 13, 14, 17, 12]

     }, {
    name: null,
    data: [12, -12, -13, 21, 11]
  }]
  });

HTML代码与

  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js">. 
  </script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

但是它每个月显示2条，我希望它显示如下附件图像.

but it display 2 bar for per month, I want it show as below attached image.

有人可以帮我吗?

，我希望我的图表显示在图像

and I want my chart as shown in image

推荐答案

而不是category，您应该使用datetime xAxis类型并将x值定义为时间戳:

Instead of category, you should use datetime xAxis type and define x values as timestamps:

series: [{
    ...,
    data: [
        [17227780000, 15],
        [18523780000, 13],
        [19819780000, 14],
        [21115780000, 17],
        [22411780000, 12],
        [23707780000, 12],
        [25003780000, -12],
        [26299780000, -13],
        [27595780000, 21],
        [28891780000, 11]
    ]
}]

实时演示: https://jsfiddle.net/BlackLabel/83us07cx/

或使用pointStart和pointInterval属性:

series: [{
    pointStart: 17227780000,
    pointInterval: 1000 * 60 * 60 * 24 * 15, // 15 days
    name: null,
    color: 'red',
    negativeColor: 'blue',
    data: [15, 13, 14, 17, 12, 12, -12, -13, 21, 11]
}]

实时演示: https://jsfiddle.net/BlackLabel/sqtha8xm/

API参考:

https://api.highcharts.com/highcharts/series.column.data

https://api.highcharts.com/highcharts/series.column.pointStart

https://api.highcharts.com/highcharts/series.column.pointInterval

https://api.highcharts.com/highcharts/series.column.negativeColor

这篇关于几个月之间需要完整的图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！