Question

有没有办法获取highcharts-grid的xPosition或者从Highchart xPosition获取它的距离？

我想将页面中的元素与实际网格对齐。问题是yAxis信息大小发生了变化。

请参阅以下示例：

和：

Answer 1

绘图区域的x起始位置可以在chart.plotLeft属性中找到，因此您没有设置固定边距。

API参考：
http://api.highcharts.com/highcharts/chart.margin

例：
http://jsfiddle.net/tcuthdra/

Answer 2

您应首先设置图表的边距，这将覆盖高图表所做的一些自动计算，这些计算会在取消选择系列时使xAxis重排。我做了一个简单的jsfiddle尝试模仿上面的图表样式，请看这里：http://jsfiddle.net/p6bog3pa/

图表配置对象是：

Highcharts.chart('container', {
    chart: {
        type: 'column',
        margin: [25, 15, 70, 400] // This fixes the chart margins
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
      column: {
        grouping: true
      }
    },
    yAxis: [
    { title: { text: 'hello title' }},
    {   title: { text: 'highcharts title' }},
    {   title: { text: 'stuff title' }}],
    series: [{
        name: 'hello',
        yAxis: 0,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'highcharts',
        yAxis: 1,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'stuff',
        yAxis: 2,
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

由于您有固定边距，因此可以为要与图表x轴对齐的任何组件设置固定偏移。当然，如果你想让它更具动态性，那么你的代码中会有更多的工作来确定合适的边距，但这不应该是一项艰巨的任务。

Answer 3

我的解决方案是找到一个Highchart的内部元素，找到它离窗口左边的距离并相应地移动我自己的元素。

显然，图表xAxis元素是第一个类名为import { SQLitePorter } from '@ionic-native/sqlite-porter'; constructor(private sqlitePorter: SQLitePorter) { } ... let db = window.openDatabase('Test', '1.0', 'TestDB', 1 * 1024); // or we can use SQLite plugin // we will assume that we injected SQLite into this component as sqlite this.sqlite.create({ name: 'data.db', location: 'default' }) .then((db: any) => { let dbInstance = db._objectInstance; // we can pass db._objectInstance as the database option in all SQLitePorter methods }); let sql = 'CREATE TABLE Artist ([Id] PRIMARY KEY, [Title]);' + 'INSERT INTO Artist(Id,Title) VALUES ("1","Fred");'; this.sqlitePorter.importSqlToDb(db, sql) .then(() => console.log('Imported')) .catch(e => console.error(e));的元素，其左上角适合我需要的内容：

highcharts-axis

离开左窗的距离：

   const highchartInsideElement = document.getElementsByClassName("highcharts-axis");
    const myElement = document.getElementById("myElement");

    if (analCharts.length > 0) {
        const highchartInsideElementTopLeft = this.getPageTopLeft(highchartInsideElement[0]).left;
        const myElementTopLeft = this.getPageTopLeft(ganttWrapper).left;

        padding = `${highchartInsideElementTopLeft - myElementTopLeft + 16}px`; // 16: cheating in order to match Highcharts extra x values

        myElement.style.paddingLeft = amchartsWrapperMargin;

    }

如何在React Highcharts中获得网格位置

3 个答案: