Question

我已经在Vue.js中创建了这段代码（由于this answer），在其中我用来自get请求的数据创建了一个饼图，这是代码。

HTML

declare @test varchar(1000) = 'nea|fact|za|ninja|web|14ff95092e3x1d214cd2'

SELECT RIGHT(@test , CHARINDEX ('|' ,REVERSE(@test))-1)

SCRIPT VUE.JS

<template v-if="this.challenge_categories.length>0">                        
  <template v-if="setOccurrences()">
    <div id="pie-container" style="min-width: 200px; height: 300px; margin: 0 auto"></div>
  </template>
</template>
<template v-else>
    <div id="pie-container" v-bind="setData([0])" style="min-width: 200px; height: 300px; margin: 0 auto"></div>
</template>

这可行，但是我无法使用添加的类别设置图例和工具提示。我可以看到this chart（不要介意50/50，这只是一个测试）我在上一个函数中尝试了更新，但是这不起作用，知道吗？谢谢。

Answer 1

由于代码执行不正确，因此会发生所有问题。首先，设置图表类别完全不会影响图表。默认情况下，从每个点name属性获取每个切片的适当“类别”，因此您的实现方式将行不通。您需要更改point值而不是类别。

实现它的最简单方法是（逐步）如下： -通过 axios 获取您的challenge_categories。 -在series函数中使用新数据创建新的setOccurence()数组。 -接收每个收到的类别对象，并将其解析为新系列中的新点。之前定义的对象。 -监视组件中series字段上的所有更改，并进行更改-用新的series对象更新图表。

我准备了一个简化的示例，该示例显示了应如何实现。这是链接：http://jsfiddle.net/b2yLc1m3/1/

P.S 我们拥有用于Highcharts的官方Vue包装器，与使用本机方法相比，该包装器使图表的实现过程更加轻松。我建议您看一下。希望对您有所帮助。这是 npm 软件包的链接：https://www.npmjs.com/package/highcharts-vue

无法使用Vue.js在Highchart中动态设置工具提示和图例

1 个答案: