当前位置: 首页>>代码示例>>TypeScript>>正文


TypeScript chart.js.Chart类代码示例

本文整理汇总了TypeScript中chart.js.Chart的典型用法代码示例。如果您正苦于以下问题:TypeScript js.Chart类的具体用法?TypeScript js.Chart怎么用?TypeScript js.Chart使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。


在下文中一共展示了js.Chart类的7个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于系统推荐出更棒的TypeScript代码示例。

示例1: createChart

 private createChart() {
   if (this.chart) {
     this.chart.destroy();
   }
   if (this.canvas) {
     const ctx = this.canvas.nativeElement;
     this.chart = new Chart(ctx, this.configuration);
   }
 }
开发者ID:Ninja-Squad,项目名称:globe42,代码行数:9,代码来源:chart.component.ts

示例2: draw

	draw(sum: number) {
		const labels = [];
		const colors = [];
		const dataSet1 = [];

		let rest = 0;
		this.categories.getData().forEach((cat: Category) => {
			if (cat.name != CategoryList.INCOME) {
				const amount = Math.abs(cat.amount);
				const perCent = 100 * amount / sum;
				if (perCent > 3) {
					labels.push(cat.name);
					dataSet1.push(amount.toFixed(2));
					colors.push(cat.color);
				} else {
					rest += amount;
				}
			}
		});
		labels.push('Rest');
		dataSet1.push(rest.toFixed(2));

		const data = {
			labels: labels,
			datasets: [
				{
					data: dataSet1,
					backgroundColor: colors,
					hoverBackgroundColor: colors,
				}
			]
		};
		// console.log(labels, dataSet1);
		if (this.myPieChart) {
			this.myPieChart.destroy();
		}
		const canvas = document.getElementById('pieChart');
		// console.log(canvas, canvas.style.display);
		// console.log(canvas.parentElement);
		canvas.style.display = 'block';
		canvas.parentElement.style.display = 'block';
		this.myPieChart = new Chart(canvas, {
			type: 'pie',
			data: data,
			options: {
				legend: {
					display: false,
				},
				animation: {
					duration: 0
				},
			},
		});
	}
开发者ID:spidgorny,项目名称:umsaetze,代码行数:54,代码来源:category-chart.component.ts

示例3: Chart

const chart: Chart = new Chart(new CanvasRenderingContext2D(), {
    type: 'bar',
    data: {
        labels: ['group 1'],
        datasets: [
            {
                backgroundColor: '#000000',
                borderWidth: 1,
                label: 'test',
                data: [1]
            }
        ]
    },
    options: {
        hover: {
            intersect: true
        },
        tooltips: {
            filter: data => Number(data.yLabel) > 0,
            intersect: true,
            itemSort: (a, b) => Math.random() - 0.5,
            position: "average",
            caretPadding: 2,
            displayColors: true,
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 1,
        },
        scales: {
            xAxes: [{
                ticks: {
                    callback: Math.floor
                },
                gridLines: {
                    display: false,
                    borderDash: [5, 15],
                    borderDashOffset: 2,
                    zeroLineBorderDash: [5, 15],
                    zeroLineBorderDashOffset: 2
                }
            }]
        },
        plugins: { arbitraryPlugin: {option: "value"} }
    }
});
开发者ID:AdaskoTheBeAsT,项目名称:DefinitelyTyped,代码行数:44,代码来源:chart.js-tests.ts

示例4: Chart

const chart: Chart = new Chart(new CanvasRenderingContext2D(), {
    type: "bar",
    plugins: [plugin, plugin],
    data: {
        labels: ["group 1"],
        datasets: [
            {
                backgroundColor: "#000000",
                borderWidth: 1,
                label: "test",
                data: [1]
            }
        ]
    },
    options: {
        hover: {
            intersect: true
        },
        onHover(ev: MouseEvent, points: any[]) {
            return;
        },
        title: {
            text: ["foo", "bar"]
        },
        tooltips: {
            filter: data => Number(data.yLabel) > 0,
            intersect: true,
            itemSort: (a, b) => Math.random() - 0.5,
            position: "average",
            caretPadding: 2,
            displayColors: true,
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 1
        },
        scales: {
            xAxes: [
                {
                    ticks: {
                        callback: Math.floor
                    },
                    gridLines: {
                        display: false,
                        borderDash: [5, 15],
                        borderDashOffset: 2,
                        zeroLineBorderDash: [5, 15],
                        zeroLineBorderDashOffset: 2
                    }
                }
            ]
        },
        legend: {
            display: true,
            labels: {
                usePointStyle: true,
                padding: 40
            }
        },
        devicePixelRatio: 2
    }
});
开发者ID:BernieSumption,项目名称:DefinitelyTyped,代码行数:60,代码来源:chart.js-tests.ts

示例5: renderLineChart

    renderLineChart(lineChart: number) {
        if (this.myChart) {
            this.myChart.destroy();
        }

        var canvas = this.element;
        var ctx = canvas.getContext('2d');

        var dataValues = [];
        var labels = [];

        var agg = 0;
        for (let i = 1; i <= 52; i++) {
            dataValues.push(agg);
            labels.push("" + i);
            agg += lineChart;
        }

        var data = {
            labels: labels,
            datasets: [
                {
                    label: "Your Savings",
                    fill: false,
                    lineTension: 0.1,
                    backgroundColor: "rgba(75,192,192,0.4)",
                    borderColor: "rgba(75,192,192,1)",
                    borderCapStyle: 'butt',
                    borderDash: [],
                    borderDashOffset: 0.0,
                    borderJoinStyle: 'miter',
                    pointBorderColor: "rgba(75,192,192,1)",
                    pointBackgroundColor: "#fff",
                    pointBorderWidth: 1,
                    pointHoverRadius: 5,
                    pointHoverBackgroundColor: "rgba(75,192,192,1)",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointHoverBorderWidth: 2,
                    pointRadius: 1,
                    pointHitRadius: 10,
                    data: dataValues
                }
            ],
        };

        var _options = {
            scales: {
                xAxes: [{
                    gridLines: {
                        display:false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Weeks'
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display:false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Savings (&#163;)'
                    }
                }]
            }
        };

        this.myChart = new Chart(ctx, {
            type: 'line',
            data: data,
            options: _options
        });
    }
开发者ID:elliotkennedy,项目名称:budget-planner,代码行数:74,代码来源:linechart.directive.ts

示例6: Chart

const chart: Chart = new Chart(new CanvasRenderingContext2D(), {
    type: "bar",
    plugins: [plugin, plugin],
    data: {
        labels: ["group 1"],
        datasets: [
            {
                backgroundColor: "#000000",
                borderWidth: 1,
                label: "test",
                data: [1, null, 3]
            }
        ]
    },
    options: {
        hover: {
            intersect: true
        },
        onHover(ev: MouseEvent, points: any[]) {
            return;
        },
        title: {
            text: ["foo", "bar"]
        },
        tooltips: {
            filter: data => Number(data.yLabel) > 0,
            intersect: true,
            mode: 'index',
            itemSort: (a, b) => Math.random() - 0.5,
            position: "average",
            caretPadding: 2,
            displayColors: true,
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 1
        },
        scales: {
            xAxes: [
                {
                    ticks: {
                        callback: Math.floor
                    },
                    gridLines: {
                        display: false,
                        borderDash: [5, 15],
                        borderDashOffset: 2,
                        zeroLineBorderDash: [5, 15],
                        zeroLineBorderDashOffset: 2
                    }
                }
            ]
        },
        legend: {
            display: true,
            labels: {
                usePointStyle: true,
                padding: 40
            }
        },
        devicePixelRatio: 2
    }
});
开发者ID:AlexGalays,项目名称:DefinitelyTyped,代码行数:61,代码来源:chart.js-tests.ts

示例7: ngOnDestroy

 ngOnDestroy() {
   if (this.chart) {
     this.chart.destroy();
   }
 }
开发者ID:Ninja-Squad,项目名称:globe42,代码行数:5,代码来源:chart.component.ts


注:本文中的chart.js.Chart类示例由纯净天空整理自Github/MSDocs等开源代码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。