Question

我正在考虑购买Highcharts，并且我对编辑器（highcharts-editor.complete.js）也很感兴趣。但是我无法推断出一种使用各种选项和先前保存的数据来初始化编辑器的方法。

我确实注意到“保存项目”和“打开项目”按钮，但是我将把编辑器与数据库集成在一起，这些按钮可能对我不起作用。

更新：

非常感谢您对Wojciech的帮助。我确实可以使用defaultChartOptions位，但是似乎无法启动ChartChange事件。这是代码片段。再次感谢！

function chart_changed(s)
{
    console.log(s);
}


highed.ready(function () {

    highed.Editor(document.body,

        {
            defaultChartOptions: {
                "title":{"text":"Cool Chart"},
                "subtitle":{"text":"My Cool Chart"},
                "exporting":{},
                "yAxis":[{"title":{},"labels":{}}],
                "lang":{},
                "credits":{},
                "chart":{},
                "xAxis":[{"title":{},"labels":{}}],
                "data":{"csv":"\"row\";\"val\"\n\"2013-01-01\";24\n\"2014-01-01\";76\n\"2015-01-01\";23"},
                "series":[{"data":[[1356998400000,24],[1388534400000,76],[1420070400000,23]],"name":"val","_colorIndex":0,"_symbolIndex":0}],
                "plotOptions":{"series":{"animation":false}}
            },

            on: {
                'ChartChange': 'chart_changed'
            }
        }


    );
});

仅供参考。我也尝试过：

            on: {
                'ChartChange': chart_changed
            }

和

highed.on('ChartChange', chart_changed);

和

highed.on('ChartChange', function (data) {
    console.log(data);
});

Answer 1

您可以通过将默认选项作为参数传递给编辑器构造函数来初始化编辑器：

{
    //The initial chart options
    defaultChartOptions: <object>,
    //Events to listen for - same as calling Editor.on(...)
    on: {
        'EventName': <function>
    },
    //Plugins to use
    plugins: {
        <name of plugin>: <object with plugin options>
    },
    //If true, an SVG chart will be inserted when exporting to provide
    //a fallback when js is not enabled/available.
    includeSVGInHTMLEmbedding: bool,
    //Features to use
    features: 'import export templates customize'
}

检查此github文章以查找更多信息：
https://github.com/highcharts/highcharts-editor/wiki/Editor-API

更新：

要启动ChartChange事件，您可以采用以下方法：

highed.ready(function () {
    var Editor = highed.Editor(document.body, {
        defaultChartOptions: {
            title: {
                text: 'Cool Chart!'
            },
            subtitle: {
                text: 'My Cool Chart!'
            },
            data: {
                csv: "\"row\";\"val\"\n\"2013-01-01\";24\n\"2014-01-01\";76\n\"2015-01-01\";23"
            }
        },
        features: 'import export templates customize'
    });

    Editor.chart.on('ChartChange', function(data) {
        console.log('Chart changed! -> ', data);
    });
});

高图编辑器

1 个答案: