javascript - 如何包含事件：自定义 highchart 数据的 {} 属性到 highcharts-vue

问题描述

vue 建立抓地力。我通常将我的 JSON 传递到标签的 :options 中，例如

现在我正在尝试使用渲染器和 ren.path().attr().add() 函数构建自定义图表。由于此属性在图表选项中使用加载函数（），因此我无法将其转换为 JSON 文件。

自定义图表值：

{
chart: {
    backgroundColor: 'white',
    width: 600,
    height: 200,
    borderWidth: 1,
    events: {
        load: function () {
            var ren = this.renderer,
                colors = Highcharts.getOptions().colors,
                rightArrow = ['M', 0, 0, 'L', 10, 0, 'L', 5, 5, 'M', 10, 0, 'L', 5, -5];
    ren.path(['M', 50, 100, 'L', 550, 100])
                .attr({
                'stroke-width': 3,
                                stroke: 'black',
                                dashstyle: 'solid'
                })
                .add();

  ren.text('0%', 50 , 150).add();
  ren.text('Peer Group 1', 50, 50).add();
  ren.text('20%', 150 , 150).add();
  ren.text('Peer Group 2', 150, 50).add();
  ren.text('40%', 250 , 150).add();
  ren.text('Peer Group 3', 250, 50).add();
  ren.text('60%', 350 , 150).add();
  ren.text('Peer Group 4', 350, 50).add();
  ren.text('80%', 450 , 150).add();
  ren.text('Peer Group 5', 450, 50).add();
  ren.text('100%', 550 , 150).add();

   ren.path(['M', 100, 80, 'L', 100, 120])
     .attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
   ren.path(['M', 200, 80, 'L', 200, 120])
     .attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
   ren.path(['M', 300, 80, 'L', 300, 120])
     .attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
   ren.path(['M', 400, 80, 'L', 400, 120])
     .attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();
   ren.path(['M', 500, 80, 'L', 500, 120])
     .attr({'stroke-width': 3,stroke: 'black',dashstyle: 'solid'}).add();  


    ren.circle(150, 100, 9).attr({fill: '#0000FF',
            stroke: 'black','stroke-width': 0}).add();
 ren.text('20%', 140, 70).css({color: '#0000FF'}) .add();

        }
    }
},
title: {
    text: 'Highcharts export server overview',
    style: {
        color: 'black'
    }
}

}

请参阅此https://jsfiddle.net/87ng9v1z/ JSON 工作正常。我总是使用相同类型的工作 json 并将其解析为标签，如上所示。

我错过了什么吗？是否有另一种方法可以将此类数据加载到 highcharts 中，或者如何将此数据转换为 JSON 格式。

标签： javascriptjsonvue.jshighcharts

javascript - 如何包含事件：自定义 highchart 数据的 {} 属性到 highcharts-vue

问题描述

解决方案

推荐阅读