조합 차트를 사용하여 Highcharts에 데이터를 표시하는 방법

조합 차트를 사용하여 Highcharts에서 데이터를 표시하려면 특정 코드 예제가 필요합니다.

모든 계층에서 데이터 시각화가 인기를 끌면서 더 많은 사람들이 강력한 JavaScript 차트 라이브러리인 Highcharts를 사용하여 데이터를 표시하기 시작했습니다. 실제 응용에서는 여러 지표의 변화 추세를 표시해야 하는 경우가 많으며, 이를 위해서는 조합 차트 기능을 사용해야 합니다.

Highcharts는 여러 유형의 차트를 함께 혼합하여 데이터의 의미를 더 잘 전달할 수 있는 강력한 조합 차트 기능을 제공합니다. 이 글에서는 조합 차트를 사용하여 Highcharts에 데이터를 표시하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

먼저, 여러 가지 시리즈로 차트를 만들어야 합니다. 예를 들어 일정 기간 동안의 매출 및 이익 추세를 표시하려고 합니다. 먼저 매출 변화를 표시하는 기본 선 차트를 만들 수 있습니다.

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: {
        title: {
            text: '金额'
        }
    },
    series: [{
        name: '销售额',
        data: [100, 200, 300, 400, 500, 600, 700]
    }]
});

다음으로 수익 변화를 표시하는 막대 차트를 만들 수 있습니다.

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }]
});

위 코드에서는 yAxis를 사용하여 두 개의 y축을 정의합니다. 각각 매출과 이익에 해당합니다. 수익 데이터는 컬럼형 계열로 표시되며, yAxis 매개변수는 1로 지정되어 두 번째 y축이 사용됩니다.

Line 차트와 세로 막대형 차트 외에도 Highcharts는 영역 차트, 원형 차트 등과 같은 다른 유형의 차트도 지원합니다. 필요에 따라 다양한 차트 유형을 선택하고 함께 표시할 수 있습니다.

Highcharts.chart('container', {
    title: {
        text: '销售额和利润变化趋势'
    },
    xAxis: {
        categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
    },
    yAxis: [{
        title: {
            text: '金额'
        }
    }, {
        title: {
            text: '利润'
        },
        opposite: true
    }],
    series: [{
        name: '销售额',
        type: 'line',
        data: [100, 200, 300, 400, 500, 600, 700]
    }, {
        name: '利润',
        type: 'column',
        data: [50, 100, 150, 200, 250, 300, 350],
        yAxis: 1
    }, {
        name: '利润率',
        type: 'area',
        data: [0.05, 0.1, 0.15, 0.2, 0.25, 0.3, 0.35],
        yAxis: 1
    }, {
        name: '产品销量',
        type: 'pie',
        data: [{
            name: '产品A',
            y: 10
        }, {
            name: '产品B',
            y: 30
        }, {
            name: '产品C',
            y: 50
        }]
    }]
});

위 코드에서는 영역형 차트(series.type은 영역)와 원형 차트(series.type은 원형)를 추가했습니다. 다양한 시리즈를 통해 다양한 유형의 차트를 결합하면 데이터를 보다 포괄적으로 표시할 수 있습니다.

요약하자면, Highcharts 라이브러리의 통합 차트 기능을 통해 다양한 유형의 차트를 함께 혼합하여 표시하여 데이터의 의미를 더 잘 전달할 수 있습니다. 필요에 따라 다양한 차트 유형을 선택하고 해당 구성 정보를 시리즈에 추가하면 됩니다. 이 기사가 조합 차트를 사용하여 Highcharts에 데이터를 표시하는 방법을 이해하는 데 도움이 되기를 바랍니다.

위 내용은 조합 차트를 사용하여 Highcharts에 데이터를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!