作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我希望在我的图表中进行子子钻取,以下是相同的代码。
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [
{
name: '2010',
data: [{
name: 'Republican2',
y: 5,
drilldown: 'republican-2010'
}]
}
],
drilldown: {
series: [
{
name: 'Republican3',
id: 'republican-2010',
data: [{
name: 'test',
y: 3,
drilldown: 'republican-2080'
}]
}
],
drilldown: {
series: [{
id: 'republican-2080',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}]
}
},// End Main drill down
});
在第一次向下钻取之前它工作正常,并且我遵循主要向下钻取结构来获取子子向下钻取。不确定 High Chart 是否支持它,或者我做错了什么。
任何帮助都会被适当..
最佳答案
您可以在
中找到相同的工作示例https://rahulrsingh09.github.io/AngularConcepts
在“附加”下 -> Angular 2 + HighCharts
图表组件.ts
import {Component, OnInit} from '@angular/core';
import {WeatherService} from "../shared/weather.service";
@Component({
selector: 'app-charts',
templateUrl: './charts.component.html',
styleUrls: ['./charts.component.css']
})
export class ChartsComponent implements OnInit {
drilldown: Object;
constructor() {
}
ngOnInit(){
this.drilldown = {
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Country',
colorByPoint: true,
data: [{
name: 'India',
y: 2,
drilldown: 'india'
}, {
name: 'United Kindom',
y: 2,
drilldown: 'uk'
}]
}],
drilldown: {
series: [{
name: 'Popular Destinations',
id: 'india',
data: [{
name: 'WB',
y: 3,
drilldown: 'wbdes'
},
{
name: 'CHD',
y: 2,
drilldown: 'chddes'
}]
}, {
name: 'Popular Destinations',
id: 'uk',
data: [{
name: 'london',
y: 2,
drilldown: 'londondes'
},
{
name: 'manchester',
y: 1,
drilldown: 'manchesterdes'
}]
}, {
name: 'votes',
id: 'londondes',
data: [
['Stamford Bridge', 40],
['Kings Road', 2]
]
},
{
name: 'votes',
id: 'manchesterdes',
data: [
['Old Trafford', 4]
]
},
{
name: 'votes',
id: 'wbdes',
data: [
['victoria memorial', 4],
['eden garden', 2],
['Home', 1]
]
},
{
name: 'votes',
id: 'chddes',
data: [
['Sukhna Lake', 4],
['Infosys', 2]
]
}]
}
};
}
}
模板代码
<div class="row">
<div class="col-md-6"><chart [options]="drilldown"></chart></div>
</div>
app.module.ts
export function highchartsFactory() {
var hc = require('highcharts');
var hcm = require('highcharts/highcharts-more');
var exp = require('highcharts/modules/exporting');
var drill = require('highcharts/modules/drilldown');
hcm(hc);
exp(hc);
drill(hc)
return hc;
}
@NgModule({
providers :[
{
provide: HighchartsStatic,
useFactory: highchartsFactory
}
]
})
关于javascript - Highcharts 中是否有子子下钻支持?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44238349/
运行 apache-drill-1.14.0 在 mysql 上测试这个查询并在 0.02 秒内得到结果 在 drill cli 中运行查询失败并出现 AssertionError 查询: produ
我是 Apache Drill 的新手。 场景是这样的: 我有一个 S3 存储桶,我在其中放置了名为 test.csv 的 csv 文件。 我已经按照官方网站的说明安装了 Apache Drill。
我正忙于学习第 2 版《编程:使用 C++ 的原理与实践》(Stroustrup),并且在读取值时遇到了有无空格的问题,然后再次显示它们。 能否请您指出正确的方向,以便我找出结果不同的原因? 代码编译
我是一名优秀的程序员,十分优秀!