- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用 Highchart 生成旭日图。作为引用,我使用 demo for the same from Highchart site
我根据我的要求修改了数据,但我想我错过了一些东西,因为它不起作用。
这是我的 jsfiddle
data: [
{
'id': '0.0',
'parent': '',
'name': 'TCI'
},
{
'id': '1.2',
'parent': '0.0',
'name': 'CM'
},
{
'id': '1.1',
'parent': '0.0',
'name': 'AS'
},
{
'id': '2.1',
'parent': '1.1',
'name': 'R&D',
'value': 104
},
{
'id': '2.5',
'parent': '1.1',
'name': 'AE',
'value': 90
},
{
'id': '2.3',
'parent': '1.1',
'name': 'Engineering Learning Center ',
'value': 51
},
{
'id': '2.2',
'parent': '1.1',
'name': 'Human Resources',
'value': 51
},
{
'id': '2.4',
'parent': '1.1',
'name': 'Accessories',
'value': 43
},
{
'id': '2.9',
'parent': '1.2',
'name': 'Accounts and Finance',
'value': 30
},
{
'id': '2.8',
'parent': '1.2',
'name': 'FO',
'value': 56
},
{
'id': '2.7',
'parent': '1.2',
'name': 'CD',
'value': 129
},
{
'id': '2.6',
'parent': '1.2',
'name': 'CA',
'value': 109
}
]
这是我要在图表上显示的数据
我可以请任何人帮助我解决这个问题。
最佳答案
您没有将 data
正确传递给容器,因此它没有呈现。
将您的data
传递给var data
,如下所示,而不是直接将您的数据(即对象数组)添加到图表数据集对象中:
var data = [{'id':'0.0','parent':'','name':'TCI'},{'id':'1.2','parent':'0.0','name':'CM'},{'id':'1.1','parent':'0.0','name':'AS'},{'id':'2.1','parent':'1.1','name':'R&D','value':104},{'id':'2.5','parent':'1.1','name':'AE','value':90},{'id':'2.3','parent':'1.1','name':'Engineering Learning Center ','value':51},{'id':'2.2','parent':'1.1','name':'Human Resources','value':51},{'id':'2.4','parent':'1.1','name':'Accessories','value':43},{'id':'2.9','parent':'1.2','name':'Accounts and Finance','value':30},{'id':'2.8','parent':'1.2','name':'FO','value':56},{'id':'2.7','parent':'1.2','name':'CD','value':129},{'id':'2.6','parent':'1.2','name':'CA','value':109}];
下面是工作JSFIDDLE :
下面的工作片段:
var data = [{
'id': '0.0',
'parent': '',
'name': 'TCI'
},
{
'id': '1.2',
'parent': '0.0',
'name': 'CM'
},
{
'id': '1.1',
'parent': '0.0',
'name': 'AS'
},
{
'id': '2.1',
'parent': '1.1',
'name': 'R&D',
'value': 104
},
{
'id': '2.5',
'parent': '1.1',
'name': 'AE',
'value': 90
},
{
'id': '2.3',
'parent': '1.1',
'name': 'Engineering Learning Center ',
'value': 51
},
{
'id': '2.2',
'parent': '1.1',
'name': 'Human Resources',
'value': 51
},
{
'id': '2.4',
'parent': '1.1',
'name': 'Accessories',
'value': 43
},
{
'id': '2.9',
'parent': '1.2',
'name': 'Accounts and Finance',
'value': 30
},
{
'id': '2.8',
'parent': '1.2',
'name': 'FO',
'value': 56
},
{
'id': '2.7',
'parent': '1.2',
'name': 'CD',
'value': 129
},
{
'id': '2.6',
'parent': '1.2',
'name': 'CA',
'value': 109
}
];
// Splice in transparent for the center circle
Highcharts.getOptions().colors.splice(0, 0, 'transparent');
Highcharts.chart('container', {
chart: {
height: '100%'
},
title: {
text: 'Demo'
},
subtitle: {
text: 'How to pass your data to sunburst chart'
},
series: [{
type: "sunburst",
data: data,
allowDrillToNode: true,
cursor: 'pointer',
dataLabels: {
format: '{point.name}',
filter: {
property: 'innerArcLength',
operator: '>',
value: 16
}
},
levels: [{
level: 1,
levelIsConstant: false,
dataLabels: {
filter: {
property: 'outerArcLength',
operator: '>',
value: 64
}
}
}, {
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
}, {
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
}
]
}],
tooltip: {
headerFormat: "",
pointFormat: 'The value of <b>{point.name}</b> is <b>{point.value}</b>'
}
});
#container {
min-width: 310px;
max-width: 800px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
关于javascript - Highcharts : sunburst chart not displaying,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51965796/
除了 Display.getOrientation() 已弃用之外,Display.getRotation() 和 Display.getOrientation() 之间还有什么区别? 是否都返回等于
我的问题 这些方法中有哪一种是专业网页设计师所偏爱的吗? Web 浏览器在绘制网站时是否首选这些方法中的任何一种? 这只是个人喜好吗? 我还缺少其他技巧吗? 注意:以上问题是关于设计多列布局 floa
我的问题 专业网页设计师是否喜欢这些方法? 网页浏览器在绘制网站时是否首选这些方法? 这只是个人喜好吗? 我还缺少其他技术吗? 注意:以上问题与设计多列布局有关 float :左; http://js
我有一些代码返回 MyTrait 类型的特征对象,这样它就可以返回几个不同结构之一。我想为 trait 对象实现 Display trait,这样我就可以打印对象,并将详细信息委托(delegate)
package polymorphism; /* * @author Rahul Tripathi */ public class OverLoadingTest { /** *
我希望 Display.timerExec(int,Runnable)与 Display.asyncExec(Runnable) 大致相同但有指定的延迟。然而,似乎Display.timerExec只
就像标题所暗示的,有什么区别吗?我当时使用的是pygame.display.flip,我在互联网上看到的是,他们使用pygame.display.update而不是使用flip。哪一个更快? 最佳答案
Sample.this.display() 和 this.display() 哪个更好? class Sample{ void display(){ System.out.println("d
当图像的 CSS 属性“显示”已被任何其他 JS 脚本/函数更改时,我想运行一些 JS 代码。有什么方法可以监视该更改并设置回调函数吗? $(this).bind.('propertychange',
在浏览 Google 字体时我注意到第一个过滤器包含这些类别: Serif Sans 衬线 展示 手写 我知道什么是 (Sans)Serif 和 Handwriting 类别(这很明显)但是显示类别过
我想知道是否可以在列标记内渲染自定义 html,这是显示表标记的一部分。 例如,我希望我的专栏里面有一些下拉列表? 使用纯 html,如下所示: ... Volvo Saab Me
display.newImage() 和 display.newImageRect() 有什么区别? 哪个更好用? 最佳答案 display.newImage() 的文档具体提到: NOTE: dis
我正在使用纯 JS 和 flexbox 为我的元素创建网格。 元素的某些部分在页面加载时被显示隐藏:无,但单击按钮后它应该在不显示和阻止之间切换。 可悲的是,这完全破坏了 display: flex
我目前正在参加 HTML/CSS 类(class),这本书推荐我使用.desktop {display:none;}/.mobile {display:inline;} 以及div class="de
这个问题在这里已经有了答案: Css transition from display none to display block, navigation with subnav [duplicat
我理解 style="display: none" 隐藏一个 HTML 元素,而 style="display: block" 显示一个 block 级 HTML 元素。 我看到一些使用 style=
设置控件的样式 display: none 和 display: block 有什么区别? 最佳答案 display 属性定义了某个 HTML 元素应该如何显示。 Display block 和 no
这个问题已经有答案了: Javascript AND operator within assignment (7 个回答) 已关闭 4 年前。 假设我只想在 this.state.display 为
我不确定如何命名这个问题,因为我是 Rust 新手,所以请随意提出修改建议。 我有两个结构。一个是 Job 结构,其中包含一些数字,例如作业需要多长时间等。另一个是 JobSequence,其中包含
我不确定如何命名这个问题,因为我是 Rust 新手,所以请随意提出修改建议。 我有两个结构。一个是 Job 结构,其中包含一些数字,例如作业需要多长时间等。另一个是 JobSequence,其中包含
我是一名优秀的程序员,十分优秀!