草庐IT

javascript - 在显示四个系列的 Highcharts 柱状图中的第二个和第三个系列之间添加间隙

coder 2024-07-26 原文

我有一个显示 four series 的 Highcharts 柱状图.

我希望系列一和二相互接触(两个蓝色的),然后有一个小间隙,然后系列三和四相互接触(橙色的)。这可以做到吗?

我自己还没有找到一种方法,也无法在此处或通过 Google 搜索找到示例。有没有人可以提供任何建议?

$(function() {
  var chart;
  var defaultTitle = "CT doses";
  var protocolNames = ['Abdomen', 'Chest', 'Sinus'];
  $(document).ready(function() {
    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        type: 'column',
        events: {
          drilldown: function(e) {
            parentSeriesIndex = e.point.series.index;
            parentSeriesName = e.point.series.name;
            chart.setTitle({
              text: ''
            });
            chart.yAxis[0].setTitle({
              text: 'Number'
            });
            if (parentSeriesName.indexOf('DLP') != -1) {
              chart.xAxis[0].setTitle({
                text: 'DLP range (mGy.cm)'
              });
            }
            if (parentSeriesName.indexOf('CTDI') != -1) {
              chart.xAxis[1].setTitle({
                text: 'CTDI range (mGy)'
              });
            }
            chart.xAxis[0].setCategories([], true);
            chart.tooltip.options.formatter = function(args) {
              if (this.series.name.indexOf('DLP') != -1) {
                returnValue = this.y.toFixed(0) + ', DLP series' + ', ' + this.x;
              } else {
                returnValue = this.y.toFixed(0) + ', CTDI series' + ', ' + this.x;
              }
              return returnValue;
            };
            chart.yAxis[1].update({
              labels: {
                enabled: false
              },
              title: {
                text: null
              }
            });
          },
          drillup: function(e) {
            chart.setTitle({
              text: defaultTitle
            }, {
              text: ''
            });
            chart.yAxis[0].setTitle({
              text: 'DLP (mGy.cm)'
            });
            chart.yAxis[1].setTitle({
              text: 'CTDIvol (mGy)'
            });
            chart.xAxis[0].setTitle({
              text: ''
            });
            chart.xAxis[1].setTitle({
              text: ''
            });
            chart.xAxis[0].setCategories(protocolNames, true);
            chart.xAxis[0].update({
              labels: {
                rotation: 90
              }
            });
            chart.yAxis[1].update({
              labels: {
                enabled: true
              },
              title: {
                text: 'CTDIvol (mGy)'
              }
            });
          }
        }
      },
      title: {
        text: 'CT doses'
      },
      xAxis: [{
        title: {
          useHTML: true
        },
        type: "category",
        labels: {
          useHTML: true,
          rotation: 90
        }
      }, {
        title: {
          useHTML: true
        },
        type: "category",
        opposite: true,
        labels: {
          useHTML: true,
          rotation: 90
        }
      }],
      yAxis: [{
        min: 0,
        title: {
          text: 'DLP (mGy.cm)'
        }
      }, {
        title: {
          text: 'CTDIvol (mGy)'
        },
        opposite: true
      }],
      legend: {
        align: 'center',
        verticalAlign: 'top',
        floating: true,
        borderWidth: 0,
        y: 70
      },
      tooltip: {},
      plotOptions: {
        column: {
          borderWidth: 0,
          groupPadding: 0.2,
          pointPadding: 0
        }
      },
      series: [{
        name: 'Mean DLP',
        color: '#2b8cbe',
        data: [{
          name: 'Abdomen',
          y: 150,
          drilldown: 'AbdomenDLP'
        }, {
          name: 'Chest',
          y: 73,
          drilldown: 'ChestDLP'
        }, {
          name: 'Sinus',
          y: 20,
          drilldown: 'SinusDLP'
        }],
        tooltip: {
          valueSuffix: ' mGy.cm'
        }
      }, {
        name: 'Median DLP',
        color: '#7bccc4',
        data: [{
          name: 'Abdomen',
          y: 140,
          drilldown: 'AbdomenDLP'
        }, {
          name: 'Chest',
          y: 63,
          drilldown: 'ChestDLP'
        }, {
          name: 'Sinus',
          y: 15,
          drilldown: 'SinusDLP'
        }],
        tooltip: {
          valueSuffix: ' mGy.cm'
        }
      }, {
        name: 'Mean CTDI',
        color: '#d7301f',
        data: [{
          name: 'Abdomen',
          y: 57.2,
          drilldown: 'AbdomenCTDI'
        }, {
          name: 'Chest',
          y: 25.8,
          drilldown: 'ChestCTDI'
        }, {
          name: 'Sinus',
          y: 43.4,
          drilldown: 'SinusCTDI'
        }],
        tooltip: {
          valueSuffix: ' mGy'
        },
        yAxis: 1
      }, {
        name: 'Median CTDI',
        color: '#fdcc8a',
        data: [{
          name: 'Abdomen',
          y: 52.2,
          drilldown: 'AbdomenCTDI'
        }, {
          name: 'Chest',
          y: 20.8,
          drilldown: 'ChestCTDI'
        }, {
          name: 'Sinus',
          y: 38.4,
          drilldown: 'SinusCTDI'
        }],
        tooltip: {
          valueSuffix: ' mGy'
        },
        yAxis: 1
      }],
      drilldown: {
        series: [{
          name: 'Abdomen DLP',
          id: 'AbdomenDLP',
          data: [
            ['up to 150', 4],
            ['up to 200', 2],
            ['up to 250', 1],
            ['up to 300', 2],
            ['up to 350', 1]
          ]
        }, {
          name: 'Chest DLP',
          id: 'ChestDLP',
          data: [
            ['up to 100', 40],
            ['up to 110', 21],
            ['up to 120', 24],
            ['up to 130', 32],
            ['up to 140', 64]
          ]
        }, {
          name: 'Sinus DLP',
          id: 'SinusDLP',
          data: [
            ['up to 130', 4],
            ['up to 140', 2],
            ['up to 150', 6],
            ['up to 160', 7],
            ['up to 170', 9]
          ]
        }, {
          name: 'Abdomen CTDI',
          id: 'AbdomenCTDI',
          xAxis: 1,
          data: [
            ['up to 20', 4],
            ['up to 22', 9],
            ['up to 24', 12],
            ['up to 26', 8],
            ['up to 28', 2]
          ]
        }, {
          name: 'Chest CTDI',
          id: 'ChestCTDI',
          xAxis: 1,
          data: [
            ['up to 10', 4],
            ['up to 12', 9],
            ['up to 14', 12],
            ['up to 16', 8],
            ['up to 18', 2]
          ]
        }, {
          name: 'Sinus CTDI',
          id: 'SinusCTDI',
          xAxis: 1,
          data: [
            ['up to 14', 4],
            ['up to 16', 9],
            ['up to 18', 12],
            ['up to 20', 8],
            ['up to 22', 2]
          ]
        }]
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highslide-software.github.io/export-csv/export-csv.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

最佳答案

您需要使用带数值的pointPlacement 选项。例如:http://jsfiddle.net/9phfzewj/34/

尝试使用值,在我的例子中,左值是 -0.1,右值是 0.1。只要启用了 series.groupingpointPlacement 就会引用之前的系列位置。

关于javascript - 在显示四个系列的 Highcharts 柱状图中的第二个和第三个系列之间添加间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30968626/

有关javascript - 在显示四个系列的 Highcharts 柱状图中的第二个和第三个系列之间添加间隙的更多相关文章

  1. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声? - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题?更新问题,以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点?我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等),但我确实想创建一个输出文件。

  2. ruby - 我需要将 Bundler 本身添加到 Gemfile 中吗? - 2

    当我使用Bundler时,是否需要在我的Gemfile中将其列为依赖项?毕竟,我的代码中有些地方需要它。例如,当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试,但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/4758609/

  3. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby - 将 Bootstrap Less 添加到 Sinatra - 2

    我有一个ModularSinatra应用程序,我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件,包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式,但它

  6. ruby-on-rails - Rails 应用程序之间的通信 - 2

    我构建了两个需要相互通信和发送文件的Rails应用程序。例如,一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情,所以我什至不知道从哪里开始。任何帮助,将不胜感激。谢谢! 最佳答案 无论Rails是什么,几乎所有Web应用程序都有您的要求,大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去,网站不应直接访问彼此

  7. ruby - 续集在添加关联时访问many_to_many连接表 - 2

    我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作),这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以

  8. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间,其中100是最大分数。计算平均分并将字母等级作为字符串返回,即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join,

  9. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  10. ruby-on-rails - link_to 不显示任何 rails - 2

    我试图在索引页中创建一个超链接,但它没有显示,也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线,我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article

随机推荐