Question

我为这张图表和我遇到的问题创造了一个小提琴：https://jsfiddle.net/emergingdzns/9g95pobg/4/

背景：我正在尝试为两个特定字词组创建堆积条形图，其中15个是积极情绪，15个是负面情绪。在上面的小提琴示例中，我创建了数据集，其中x轴（垂直）从1开始并经过19.每个单词的正或负分数为1-5（或-1到-5）。因此，为了让它们并排显示，我在PHP中循环它们并为＆＃34; x＆＃34;设置相同的值。在情绪值反向相等的一组单词中的每一个上。因此，积极情绪为4的单词与-4的负面情绪相匹配。有时，具有相同反向值的单词数量不均匀，因此将它们添加到＆＃34; x＆＃34;没有相应字的位置。（你可以在小提琴输出中看到）。＆＃34; y＆＃34; axis是在此特定查询中使用该单词的次数。

问题1：我似乎无法获得每个＆＃34; x＆＃34;对齐的位置。最终，我们希望图形看起来像具有负堆栈（http://www.highcharts.com/demo/bar-negative-stack）的条形图的Highchart演示。但是，在他们的示例中，他们的系列数据集只是一堆数字。我们需要完整的数据，所以我们必须使用一个对象，这样我们才能得到这个词和它的情感值以及它的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
            }]
        });
    });
});

提前感谢您的任何帮助。

Answer 1

你错过了

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

从图表选项中

Highcharts Stacking Bar错位和奇怪的条形

1 个答案: