Question

亲爱的Highcharts专家，

我对高潮图很新，慢慢地向上走。我想创建一个与普通条形图相结合的高图。堆叠的酒吧。我在制作它时遇到了问题。以下是我的jsfiddle版本

plotOptions: {
series: {
            cursor: 'pointer',
            pointPadding: 0,
        groupPadding: 0.01,
            point: {
                events: {
                    click: function () {
                    if(this.category=='60') return false;
                        alert('Category: ' + this.category + ', value: ' + this.y);
                        selected = this;
                    }, 

                }
            },

            allowPointSelect: true,
            states: {
                select: {
                    color: null,
                    borderWidth: 10,
                    borderColor: 'Blue'
                }
            }
        },
  column: {
    stacking: 'normal',
    dataLabels: {
      enabled: false,
      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
      style: {
        textShadow: '0 0 3px black'
      }
    }
  },

}

以下是我的难点：

1）这里为60,61,62我想提供不同的数据（系列）来创建一个普通的条和休息堆栈栏。如果数据不存在则不创建它。因此，堆栈栏应该从来自另一个来源的值开始，然后在该谷值正常栏之前

2）我想要一个onclick事件，我能够做，但这个事件是在系列数据上调用的。单击时，我想要突出显示整个堆栈栏以及x轴值。不应该选择前三个。

3）我想再提供一个数据（系列），它将显示一条直线并突出显示其y轴值。

在上述方面需要一些帮助。感谢。

Answer 1

在这一个问题中，你有一些荒谬的问题。在将来将它们分开时，它可以更容易回答，并使问题对未来的读者更有用。但是，让我看看我是否可以提供帮助： 1）您可以为不想重叠或使用x和y坐标的系列使用null

$i=0;
foreach($_SESSION['cart_array'] as $each_item){
    $i++;
    $item_id = $each_item['item_id'];
    $sql = "SELECT * FROM products_accessories WHERE id='$item_id' LIMIT 1";
    $result = mysqli_query($dbCon, $sql);
    while($row = mysqli_fetch_array($result)){
        $product_name = $row['prod_name'];
        $price = $row['price_USD'];
        $product_image = $row['main_photo'];
    }
    $total_price = $price * $each_item['quantity'];
    $ordered_quantity = $each_item['quantity'];

2）您似乎已经找到了点击事件。请注意，您可以覆盖每个系列的点击事件，因此对于您不希望事件的系列，只需将click事件添加到不执行任何操作的系列中：

series: [{
  name: 'A',
  //stack: 1,
  data: [{x:60, y:4000}, {x:61, y:4000}, {x:62, y:4000}, {x:63, y:4000}]
}, {
  name: 'B',
  id: 'B',
  color: 'red',
  //stack: 2,
   data: [{x:63, y:1000}, {x:64, y:1000}, {x:65, y:1000}, {x:66, y:1000}, {x:67, y:1000}, {x:68, y:1000}, {x:69, y:1000}, {x:70, y:1000}]
}, {
  name: 'C',
  linkedTo:'B',
  color: 'red',
  //stack: 2,
   data: [{x:66, y:400}, {x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
},{
  name: 'D',
  //stack: 2,
   data: [{x:63, y:400}, {x:64, y:600}, {x:65, y:700}, {x:66, y:800}, {x:67, y:1100}, {x:68, y:1100}, {x:69, y:1100}, {x:70, y:1100}, {x:71, y:1100}, {x:72, y:1100}, {x:73, y:1100}, {x:74, y:1100}]

}, {
  name: 'E',
  //stack: 2,
  data: [{x:64, y:400}, {x:65, y:400},{x:66, y:400},{x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]

}]

3）您要寻找的线是y轴线图

series: [{
  name: 'A',
  events: {
    click: function() {
        return true;
    }
  },

4 - 来自评论）显示2个系列作为一种颜色和两个传奇项目。你可以设置每个系列＆＃39;手动着色。使用它将它们设置为相同的颜色。要仅在图例中显示一个，请使用linkedTo

yAxis: {
  labels: {
    formatter: function() {
      return '\u20ac' + ' ' + this.value
    },
    x: -20,
    y: 0
  },

  plotLines: [{
    value: 1000,
    color: 'red',
    width: 3,
    zIndex: 10,
    id: 'plot-line-1'
  }],

5 - 也来自评论）突出显示轴上的值。您可以使用formatter函数修改轴上的标签

, {
  name: 'B',
  id: 'B',
  color: 'red',
  //stack: 2,
   data: [{x:63, y:1000}, {x:64, y:1000}, {x:65, y:1000}, {x:66, y:1000}, {x:67, y:1000}, {x:68, y:1000}, {x:69, y:1000}, {x:70, y:1000}]
}, {
  name: 'C',
  linkedTo:'B',
  color: 'red',
  //stack: 2,
   data: [{x:66, y:400}, {x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
}

http://jsfiddle.net/wt45e6mL/31/

Answer 2

1）这是一个复杂的问题，没有简单的解决方案。您可以为堆叠列将分组参数设置为false：

bar.grouping

如果您希望为列提供三个单独的堆栈而不是为列提供一个堆栈，则可以使用series.stack：

stack

您可以将groupPadding和pointPadding用于0，将series.grouping用于false。它应该可以帮助你的图表。

groupPadding

pointPadding

grouping

在这里你可以看到它是如何工作的例子：

http://jsfiddle.net/y6tLaz1a/3/

2）在您的点击事件回调函数中，您可以检查点类别是否小于63.如果它更小，您可以像现在这样做返回false。在其他情况下，您可以迭代所有点并检查它们是否具有与您刚刚单击的点类别相等的类别。如果它们具有相同的类别，则可以使用Point.select选择它们。在这里你可以阅读这个方法：

Point.select

例如，您的点击事件回调函数可能如下所示：

  click: function() {
  var point = this;
  if (point.category <= 63) {
    return false;
  }
  point.select(true, false)
  Highcharts.each(this.series.chart.series, function(series, ind) {
    Highcharts.each(series.data, function(p, i) {
      if (p.category == point.category) {
        p.select(true, true)
      }
    })
  })
 },

在这里你可以看到这个功能的例子：

http://jsfiddle.net/wt45e6mL/22/

3）你可以在你的情况下使用plotLine： addPlotLine

您可以使用label.text参数向plotLine添加文本： label.text

在这里你可以看到一个例子： http://jsfiddle.net/eyLz09xv/

因此，将所有三个示例合并为一个，在这里您可以看到最终结果： http://jsfiddle.net/y6tLaz1a/4/

highcharts论坛上的相关主题： http://forum.highcharts.com/highcharts-usage/bar-chart-with-stacked-bar-t34981/

亲切的问候。

条形图与堆积栏

2 个答案: