Highcharts堆积柱状图错位和奇怪的大小酒吧

我创建了一个捣鼓这个图表，我遇到的问题：https://jsfiddle.net/emergingdzns/9g95pobg/4/Highcharts堆积柱状图错位和奇怪的大小酒吧

背景：我想创建一个堆叠条形图两种特定的一组字，15个是积极的情绪，15个是消极的情绪。在上面的小提琴示例中，我创建了x轴（垂直）从1开始并穿过19的数据集。每个单词的正分数或负分数均为1-5（或-1至-5）。所以为了让它们并排显示，我在PHP中循环遍历它们，并在情感值相反的一组单词中为每个“x”设置相同的值。所以一个4的正面情绪与一个负面情绪-4的词相匹配。有时候，有不同数量的具有相同反值的单词，因此它们被添加到没有相应单词的“x”位置。（你可以在小提琴输出中看到）。 “y”轴是该特定查询中单词的使用次数。

问题1：我似乎无法得到在每个“x”位置对齐的酒吧。最终，我们希望图表看起来像Highchart演示中的带负片的条形图（http://www.highcharts.com/demo/bar-negative-stack）。然而，在他们的例子中，他们系列的数据集只是一堆数字。我们需要完整的数据，所以我们必须使用一个对象，这样我们才能得到这个词，它的情感价值和它的y值（使用的次数）一起。

问题2：酒吧是不同的厚度/高度在我们的页面（这似乎不是一个问题在小提琴）。提前

<div id="container" style="height: 400px"></div> 
<script> 
$(function() { 
    var allPositiveData = [{"sentimentName":"xoxoxo","y":2,"sentimentValue":4,"x":1},{"sentimentName":"amazing","y":3,"sentimentValue":4,"x":2},{"sentimentName":"awesome","y":6,"sentimentValue":4,"x":3},{"sentimentName":"terrific","y":1,"sentimentValue":4,"x":4},{"sentimentName":"wow","y":5,"sentimentValue":4,"x":5},{"sentimentName":"exciting","y":1,"sentimentValue":3,"x":6},{"sentimentName":"happy","y":2,"sentimentValue":3,"x":7},{"sentimentName":"excited","y":2,"sentimentValue":3,"x":8},{"sentimentName":"excellent","y":1,"sentimentValue":3,"x":9},{"sentimentName":"great","y":15,"sentimentValue":3,"x":10},{"sentimentName":"heartfelt","y":1,"sentimentValue":3,"x":11},{"sentimentName":"love","y":7,"sentimentValue":3,"x":12},{"sentimentName":"loved","y":1,"sentimentValue":3,"x":13},{"sentimentName":"grateful","y":4,"sentimentValue":3,"x":14},{"sentimentName":"lovely","y":2,"sentimentValue":3,"x":15}]; 
    var allNegativeData = [{"sentimentName":"damn","y":-1,"sentimentValue":-4,"x":1},{"sentimentName":"dead","y":-3,"sentimentValue":-3,"x":6},{"sentimentName":"angry","y":-1,"sentimentValue":-3,"x":7},{"sentimentName":"horrible","y":-1,"sentimentValue":-3,"x":8},{"sentimentName":"loss","y":-6,"sentimentValue":-3,"x":9},{"sentimentName":"losing","y":-1,"sentimentValue":-3,"x":10},{"sentimentName":"bad","y":-2,"sentimentValue":-3,"x":11},{"sentimentName":"awful","y":-2,"sentimentValue":-3,"x":12},{"sentimentName":"cruel","y":-2,"sentimentValue":-3,"x":13},{"sentimentName":"kill","y":-1,"sentimentValue":-3,"x":14},{"sentimentName":"die","y":-1,"sentimentValue":-3,"x":15},{"sentimentName":"worse","y":-2,"sentimentValue":-3,"x":16},{"sentimentName":"worried","y":-1,"sentimentValue":-3,"x":17},{"sentimentName":"hated","y":-1,"sentimentValue":-3,"x":18},{"sentimentName":"died","y":-10,"sentimentValue":-3,"x":19}]; 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'bar' 
      }, 
      title: { 
       text: 'Sentiment Frequency' 
      }, 
      xAxis: { 
       labels: { 
        enabled: false 
       }, 
       tickWidth: 0, 
       showEmpty: true 
      }, 
      yAxis: { 
       title: { 
        text: null 
       }, 
       tickInterval: 1, 
       padding: 0 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>' + this.point.sentimentName + '</b><br>Sentiment value: <b>' + this.point.sentimentValue + '</b><br/>' + 
         'Number of Uses: <b>' + Highcharts.numberFormat(Math.abs(this.point.y), 0) + '</b>'; 
       } 
      }, 
      series: [{ 
       name: 'Negative', 
       data: allNegativeData 
      }, { 
       name: 'Positive', 
       data: allPositiveData 
      }] 
     }); 
    }); 
});

感谢您的任何援助：你可以在这里截图中看到这一点：

下面是从小提琴的代码。

来源

2016-03-15 Andrew Christensen

图表，默认情况下，由x值分组点 - 每个创建斑点并排侧。您可以将**分组：false **或** stacking：'normal'**添加到您的plotOptions中以解决此问题：https：//jsfiddle.net/jlbriggs/9g95pobg/6/ – jlbriggs

你缺少

plotOptions: { 
    series: { 
       stacking: 'normal' 
      } 
     },

从图表选项

来源

2016-03-15 19:31:13

Highcharts堆积柱状图错位和奇怪的大小酒吧

回答

相关问题