【问题标题】:How to set point in highcharts when x axis and y axis has data as text values?当x轴和y轴有数据作为文本值时,如何在highcharts中设置点?
【发布时间】:2018-03-08 08:32:31
【问题描述】:

我有这样的数据 x axis = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']y axis = ["Aged 1-12", "Aged 13-20 years", "Aged 21-30 years"]

现在,我想用 y 轴指向 x 轴,我不确定应该在 Highchart 的数据字段中输入哪种数据格式。

我已尝试使用此输入数据[1,2,3,4,5],但它在图表上显示错误点。这是我用数据尝试过的图表

这是我写的代码:

Highcharts.chart("c5312209", {
  chart: {
    type: 'line'
  },
  title: {
    text: "Z test"
  },
  tooltip:{
    enabled: false
  },
  yAxis: {
    allowDecimals: false,
    labels: {
      formatter: function(){
        var d = {"1":"Aged Under 10 Years Old","2":"Aged 11-15 Years Old","3":"Aged 16-17 Years Old","13":"Aged Over 101 Years Old"};
        return d[this.value];
      }
    },
    title: {
      text: ''
    }
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    title: {
      text: 'Time'
    }
  },
  series: [{data: [0, 0, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0]}]
});

请帮我解决这个问题。 提前谢谢你。

【问题讨论】:

  • 如果您每个月都有一个积分,那么像您所做的那样提供数据series: [{data: [0, 0, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0]}] 是一个不错的选择。如果您只想设置几个月的点数,您可以像这样明确声明 x 值:series: [{data: [{x:0, y: 0}, {x: 1, y: 0}, {x: 2, y: 13}...]}]。在您的配置中,格式化程序存在问题(与标签相比,y 刻度被放置在错误的值上),这是一个工作示例:jsfiddle.net/ewolden/me9pyzqv/14
  • 感谢@ewolden 的快速回复。我将尝试使用您的解决方案。
  • @ewolden 是否可以显示没有系列的数据,例如没有文字series 1 ?
  • 是的,这取决于你想要做什么:series: [{name: '', ...}] 这会将名称设置为空。或series: [{showInLegend: false,...}] 将从图例中删除系列。
  • @ewolden 它有效。谢谢...请在答案中添加您的评论,以便我接受。

标签: javascript jquery ruby-on-rails charts highcharts


【解决方案1】:

如果您每个月都有一个积分,那么像您所做的那样提供数据series: [{data: [0, 0, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0]}] 是一个不错的选择。

如果您只想设置几个月的点数,您可以像这样明确声明 x 值:

series: [{data: [{x:0, y: 0}, {x: 1, y: 0}, {x: 2, y: 13}...]}]

在您的配置中,格式化程序存在问题(与标签相比,y 刻度被放置在错误的值上),这是一个工作示例: https://jsfiddle.net/ewolden/me9pyzqv/14


从评论中,要从图例中隐藏系列,或删除系列名称,可以执行以下操作:

您可以执行以下任一操作:series: [{name: '', ...}],这会将名称设置为空。或series: [{showInLegend: false,...}] 将从图例中删除该系列。

【讨论】:

  • 嗨@ewolden 你能帮我看看我应该输入什么数据格式来显示折线图吗?我试过这个```系列:[{ showInLegend:false, data: [[(new Date("Mon, 26 Feb 2018 13:43:00 UTC +00:00").getTime()), 12], [(new Date("2018 年 2 月 19 日星期一 16:00:00 UTC +00:00").getTime()), 2], [(new Date("2018 年 1 月 13 日星期六 11:00:00 UTC + 00:00").getTime()), 3], [(new Date("Fri, 20 Feb 2009 00:00:00 UTC +00:00").getTime()), 0] ] }] `` `
  • 我尝试输入给定格式的数据但显示错误标签但点工具提示显示正确日期jsfiddle.net/me9pyzqv/17
  • 由于问题与问题相同,我宁愿只添加评论。我已经更新了你的小提琴:jsfiddle.net/me9pyzqv/21
  • 好的。我想我找到了解决办法。非常感谢你的帮助。如果有什么阻止我,我会提出新问题。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-07-07
  • 1970-01-01
  • 2014-12-07
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多