Angularjs 堆叠高图表-如何绘制给定点并从堆栈块中移除颜色_Angularjs_Highcharts_Stacked Chart

Angularjs 堆叠高图表-如何绘制给定点并从堆栈块中移除颜色

angularjs highcharts

Angularjs 堆叠高图表-如何绘制给定点并从堆栈块中移除颜色,angularjs,highcharts,stacked-chart,Angularjs,Highcharts,Stacked Chart,我需要使用Angular JS在图形中绘制用户一天的办公时间（进出时间）例如，我10点到办公室，1点出去吃午饭，2点再来，然后2:30出去工作，等等所以在图表中，y轴应该显示从10到6的时间，它应该在图表上绘制时间，比如1，它应该指向10，然后指向1，然后指向2，然后指向2:30，依此类推因此，我的问题是： 1）使用哪个图形，这可以在一个条形图中实现 2）我使用的是堆叠的highchart，但是由于堆叠的图表添加了点，我发送两个数据之间的差异，所以首先我发送10，另一个我想指向1，所以

我需要使用Angular JS在图形中绘制用户一天的办公时间（进出时间）

例如，我10点到办公室，1点出去吃午饭，2点再来，然后2:30出去工作，等等

所以在图表中，y轴应该显示从10到6的时间，它应该在图表上绘制时间，比如1，它应该指向10，然后指向1，然后指向2，然后指向2:30，依此类推

因此，我的问题是：

1）使用哪个图形，这可以在一个条形图中实现

2）我使用的是堆叠的highchart，但是由于堆叠的图表添加了点，我发送两个数据之间的差异，所以首先我发送10，另一个我想指向1，所以我发送3，等等…，但是它用一种颜色填充整个块，比如从10-1一种颜色，1-2一种颜色等等…，我需要的是，首先，它应该指向10，然后指向1，然后指向2…依此类推，它不应该用任何颜色填充它

到目前为止，我取得的成就是：

但我想要达到的是这样的目标

请帮忙

您还可以检查以下代码：

<html>
<head>
<title>Highcharts Tutorial</title>
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto">   </div>
<script language="JavaScript">
$(document).ready(function() {  
  var chart = {
    type: 'column'
  };
  var title = {
    text: 'Stacked column chart'   
  };    
 var xAxis = {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
 };
 var yAxis ={
   min: 10,
   max:18,
   tickInterval:1,
   title: {
     text: 'Total fruit consumption'
   },
   stackLabels: {
     enabled: false,
     style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
     }
    }
   };
   var legend = {
    enabled:false
   };   
   var tooltip = {
     enabled:false
   };
   var plotOptions = {
     column: {
       stacking: 'normal',
        dataLabels: {
          enabled: false,
           color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
          style: {
            textShadow: '0 0 3px black'
           }
         }
       }
     };
     var credits = {
       enabled: false
     };
    var series= [

      {  name: 'John',
        data: [1]
      },
      {  name: 'John',
        data: [0.5]
      },
      {  name: 'John',
        data: [1]
      }, 
      {
        name: 'Jane',
        data: [3]
      }, {
        name: 'Joe',
        data: [10]      
      }];     

   var json = {};   
   json.chart = chart; 
   json.title = title;   
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.credits = credits;
   json.series = series;
   $('#container').highcharts(json);

  });
  </script>
  </body>
  </html>

  </script>
  </body>
  </html>


海图教程
$（文档）.ready（函数（）{
var图表={
类型：“列”
};
变量标题={
文本：“堆叠柱形图”
};    
变量xAxis={
类别：[‘苹果’、‘橘子’、‘梨’、‘葡萄’、‘香蕉’]
};
雅克西斯变种={
民:10,，
最高：18，
时间间隔：1，
标题：{
正文：“水果总消费量”
},
堆叠标签：{
启用：false，
风格：{
fontWeight:'粗体'，
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“灰色”
}
}
};
变量图例={
已启用：false
};   
变量工具提示={
已启用：false
};
变量plotOptions={
专栏：{
堆叠：“正常”，
数据标签：{
启用：false，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”，
风格：{
textShadow:'0 0 3px黑色'
}
}
}
};
风险值信用={
已启用：false
};
变量系列=[
{姓名：'约翰'，
数据：[1]
},
{姓名：'约翰'，
数据：[0.5]
},
{姓名：'约翰'，
数据：[1]
}, 
{
姓名：'简'，
数据：[3]
}, {
名字：'乔'，
数据：[10]
}];     
var json={}；
json.chart=chart；
json.title=标题；
json.xAxis=xAxis；
json.yAxis=yAxis；
json.legend=图例；
json.tooltip=工具提示；
json.plotOptions=plotOptions；
json.credits=学分；
json.series=series；
$（“#容器”）.highcharts（json）；
});

以下是使用

columnrange

系列的示例

实例：

[编辑]

更完整的一个：

实例：

下面是一个使用

columnrange

系列的示例

实例：

[编辑]

更完整的一个：

实例：

const options = {
  chart: {
    type: 'columnrange'
  },
  series: [{
    name: 'Temperatures',
    data: [{
      borderWidth: 2,
      borderColor: Highcharts.getOptions().colors[1],
      color: 'rgba(0,0,0,0)',
      x: 0,
      low: 0,
      high: 10
    }, {
      borderWidth: 2,
      borderColor: Highcharts.getOptions().colors[1],
      color: 'rgba(0,0,0,0)',
      x: 0,
      low: 10,
      high: 16
    }, {
      borderWidth: 2,
      borderColor: Highcharts.getOptions().colors[1],
      color: 'rgba(0,0,0,0)',
      x: 0,
      low: 16,
      high: 20
    }]
  }]
}

const chart = Highcharts.chart('container', options);