Javascript Vue.js组件中的Highcharts

我正在尝试使用Highcharts和Vue.js创建图形组件。 我想传递Highcharts要使用的元素的id属性，但无法获取该属性

如何动态设置id？

这是HTML：

---

编辑：从@Tody.Lu查看Vue 2示例，这是一个很好的解决方案

您需要使用

renderTo:“#”+this.element

获得格式正确的ID选择器

我相信您也可以使用

renderTo:this.$el

而不需要任何ID

编辑：我检查了我的Highcharts组件，我就是这样得到它的：

$(this.$el).highcharts(data);

---

这样就不需要ID。

如果您使用的是Vuex这样的中央数据存储，则可以包括存储创建的图表数量的图表增量属性，以及在有新图表时的增量属性

然后使用计算属性设置ID：

computed: {
  id () {
    return 'highchart-' + idvar
  }
}

computed: {
  id () {
    return 'chart-' + this.uid
  }
}

你可以很容易地把它保存在一个全局变量中，但这不是一个好主意

另一个选项（我在过去使用过）是在组件中创建一个随机字符串。我使用了在找到的UUID生成器

如果我使用UUID函数

UUID.generate（）

返回一个随机字符串：

data () {
  return {
    uid: UUID.generate()
  } 
}

然后在计算属性中使用生成的

uid

属性：

computed: {
  id () {
    return 'highchart-' + idvar
  }
}

computed: {
  id () {
    return 'chart-' + this.uid
  }
}

---

然后在虚拟机中使用

{{id}}

vue.js 2.0示例（vue开始使用虚拟dom）：
1）

npm安装highcharts

2）

var Highcharts=require（'Highcharts'）

3） 
Highcharts.chart（
this.$el
，{…}）
“mounted”方法中，因为
this.$el
在“mounted”之前不可用

4） highcharts的实例应在的“销毁前”方法中销毁



var Highcharts=需要（“Highcharts”）；
导出默认值{
名称：“图表”，
道具：{
系列：{
类型：数组，
必填项：true
}
},
数据：函数（）{
返回{
目标：未定义
}
},
挂载：函数（）{
this.target=Highcharts.chart（this.$el{
标题：{
文字：“月平均气温”，
x:-20/中心
},
副标题:{
文字：“来源：WorldClimate.com”，
x:-20
},
xAxis：{
类别：[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’，
‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’]
},
亚克斯：{
标题：{
文字：“温度（°C）”
},
绘图线：[{
值：0，
宽度：1，
颜色：'#808080'
}]
},
工具提示：{
valueSuffix:“°C”
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：'中间'，
边框宽度：0
},
系列：这个系列
});
},
beforeDestroy:function（）{
this.target.destroy（）；
},
}
注意，在模板中您有：

<template>
    <div><div>
</template>



您需要：

<template>
    <div></div>
</template>


请不要传递
：element=“'brick-chart'”
，而是尝试传递
element=“brick-chart”
，因为您只传递一个字符串@HectorLorenzo我尝试了这种方法，但在查找元素ID的Highcharts时遇到困难。无论如何，现在不需要再传递ID了。感谢您的帮助。根据他们提供的文档，我认为您不需要这样做
renderTo
自动假定您正在传递一个
id
标识符。感谢大家的帮助，这个问题用$（这个.$el）解决了；现在我的组件在经过几次修改后可以重用了。我仍然使用Vuex，因为我正在处理的项目的复杂性很低。但我将使用一个中央数据存储进行测试，正如您在我将开始的另一个项目中指出的那样。谢谢你的帮助。