Button 股票图表时间线按钮和日期字段与图表左对齐

我需要指南，使我的图表如所附的屏幕截图所示。 为此，我一直在使用HighCharts，但找不到合适的选项或配置。以下是我所需设计的屏幕截图：

我还将fiddle链接附加到我当前的实现中，我使用它来实现这些设计要求

HTML:

JavaScript:

Highcharts.stockChart('container', {
  chart: {
    marginLeft: 300,
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  title : {
    text : 'Activity',
    x: -280
  },
  rangeSelector: {
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
            align: 'left',
            y: 20,
            x: -140
        },
    inputPosition: {
           align: 'left',
           y: 15,
           x: -280
    },
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },


  legend: {
        width: 100,
        align: 'left',
        x: 0, // = marginLeft - default spacingLeft
        y: -100,
        itemWidth: 100,
        borderWidth: 1
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});

Highcharts.stockChart（'container'）{
图表：{
间距：200，
},
导航器：{
已启用：false
},
滚动条：{
已启用：false
},
标题：{
文本：“活动”
},
范围选择器：{
AllButtonEnabled:正确，
按钮：[{
键入：“月”，
计数：3，
正文：“每日”，
数据分组：{
是的，
单位：[“天”，“1]]]
}
}, {
类型：'年'，
计数：1，
文本：“每周”，
数据分组：{
是的，
单位：[‘周’，[1]]
}
}, {
键入：“全部”，
文字：“每月”，
数据分组：{
是的，
单位：[‘月’，[1]]
}
}],
按钮主题：{
宽度：60
},
选定：2
},
图例：{
启用：对，
对齐：“左”，
垂直排列：“顶部”，
布局：“垂直”，
x:0,，
y:100
},
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
月份：'%e.%b'，
年份：'%b'
}
},
系列：[{
名称：“标签1”，
颜色：“00aade”，
数据：[[1501545600000,5]，[1504224000000,4]，[1506816000000,6]，[1509494400000,5]]
},
{
名称：“标签2”，
颜色：“8cc63e”，
数据：[[1501545600000,1]，[1504224000000,0]，[1506816000000,2]，[1509494400000,0]]
}]
});

如果有人能指导我做正确的配置或造型来实现这一点，我将不胜感激

谢谢。

我能够获得Highcharts x，y坐标，使用起来有点困难，但是您需要在

按钮位置

、

输入位置

和

标题

上做一些样式设置，以便将它们移到右侧：

HTML:

---

图例似乎没有呈现-请检查以确保数据的格式正确，并尝试使用

x

和

y

这是我能得到的最接近的图例

在左侧添加间距：

图表：{
间距：300，
},

将图例移到左侧：

图例：{
启用：对，
对齐：“左”，
垂直排列：“顶部”，
布局：“垂直”，
x:-250，
y:150
},

将标题移到左侧：

标题：{
对齐：“左”，
x:-280，
文本：“活动”，
浮动：对
},

向左移动范围：

范围选择器：{
浮动：是的，
x:0,，
垂直排列：'中间'，
按钮位置：{
对齐：“左”，
y:20，
x:-140
},
输入位置：{
对齐：“左”，
y:15，
x:-280
},
...

禁用导出按钮：

导出：{
按钮：{
上下文按钮：{
已启用：false
}
}
}

---

Highcharts.stockChart（'container'）{
图表：{
间距：300，
},
图例：{
启用：对，
对齐：“左”，
垂直排列：“顶部”，
布局：“垂直”，
x:-250，
y:150
},
导航器：{
已启用：false
},
滚动条：{
已启用：false
},
出口：{
按钮：{
上下文按钮：{
已启用：false
}
}
},
标题：{
对齐：“左”，
x:-280，
文本：“活动”，
浮动：对
},
范围选择器：{
浮动：是的，
x:0,，
垂直排列：'中间'，
按钮位置：{
对齐：“左”，
y:20，
x:-140
},
输入位置：{
对齐：“左”，
y:15，
x:-280
},
AllButtonEnabled:正确，
按钮：[{
键入：“月”，
计数：3，
正文：“每日”，
数据分组：{
是的，
单位：[“天”，“1]]]
}
}, {
类型：'年'，
计数：1，
文本：“每周”，
数据分组：{
是的，
单位：[‘周’，[1]]
}
}, {
键入：“全部”，
文字：“每月”，
数据分组：{
是的，
单位：[‘月’，[1]]
}
}],
按钮主题：{
宽度：60
},
选定：2
},
xAxis：{
键入：“日期时间”，
日期时间标签格式：{
月份：'%e.%b'，
年份：'%b'
}
},
系列：[{
名称：“标签1”，
颜色：“00aade”，
数据：[[1501545600000,5]，[1504224000000,4]，[1506816000000,6]，[1509494400000,5]]
},
{
名称：“标签2”，
颜色：“8cc63e”，
数据：[[1501545600000,1]，[1504224000000,0]，[1506816000000,2]，[1509494400000,0]]
}]
});

Highcharts.stockChart('container', {
  chart: {
    marginLeft: 300,
  },
  navigator: {
    enabled: false
  },
  scrollbar: {
    enabled: false
  },
  title : {
    text : 'Activity',
    x: -280
  },
  rangeSelector: {
    x: 0,
    verticalAlign: 'middle',
    buttonPosition: {
            align: 'left',
            y: 20,
            x: -140
        },
    inputPosition: {
           align: 'left',
           y: 15,
           x: -280
    },
    allButtonsEnabled: true,
    buttons: [{
      type: 'month',
      count: 3,
      text: 'Daily',
      dataGrouping: {
        forced: true,
        units: [['day', [1]]]
      }
    }, {
      type: 'year',
      count: 1,
      text: 'Weekly',
      dataGrouping: {
        forced: true,
        units: [['week', [1]]]
      }
    }, {
      type: 'all',
      text: 'Monthly',
      dataGrouping: {
        forced: true,
        units: [['month', [1]]]
      }
    }],
    buttonTheme: {
      width: 60
    },
    selected: 2
  },


  legend: {
        width: 100,
        align: 'left',
        x: 0, // = marginLeft - default spacingLeft
        y: -100,
        itemWidth: 100,
        borderWidth: 1
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  series: [{
    name: 'Label 1',
    color: "#00aade",
    data: [[1501545600000, 5], [1504224000000,4], [1506816000000, 6],[1509494400000,5]]
  },
  {
    name: 'Label 2',
    color: "#8cc63e",
    data: [[1501545600000, 1], [1504224000000,0], [1506816000000, 2],[1509494400000,0]]
  }]
});