使用Highcharts的活动图表

Active charts using Highcharts If you are looking how to create active charts (or diagrams) with information – our new article is for you. I have browsed the web, and found one good and serious solution – Highcharts library. This is pure javascript library which offers interactive and intuitive charts. This library supports various of possible charts: area, line, spline, areaspline, pie, column and other. I think that this is the best way to produce information for viewers. In today’s demo I prepared several examples with different charts.

使用Highcharts的活动图表如果您正在寻找如何使用信息创建活动图表(或图表)，我们的新文章非常适合您。 我浏览了网络，找到了一个很好的解决方案-Highcharts库。 这是纯JavaScript库，提供交互式和直观的图表。 该库支持各种可能的图表：面积图，折线图，样条线，面积图样线，饼图，柱形图和其他图表。 我认为这是为观众提供信息的最佳方式。 在今天的演示中，我准备了几个带有不同图表的示例。

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, let’s download the source files and start coding !

好的，让我们下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

In the beginning we have to add all the necessary scripts in the header section:

首先，我们必须在标题部分添加所有必需的脚本：

<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/gray.js"></script>
<script src="js/main.js"></script>

<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/gray.js"></script>
<script src="js/main.js"></script>

This are jQuery library, highcharts, gray.js is a way to customize chart design. In our package you can see several more small javascript files: dark-blue.js, dark-green.js, grid.js and skies.js. All of them – different designs of charts. You can link one of them (instead current gray.js) to see different chart designs. The last one javascript file – main.js – our own file with initialize code. In our demonstration I prepared two different charts, plus – I added a possibility to change chart type on-fly for the first one chart, let’s look at the result html code:

这是jQuery库，highcharts，gray.js是自定义图表设计的一种方法。 在我们的程序包中，您可以看到几个其他小的javascript文件：dark-blue.js，dark-green.js，grid.js和skies.js。 所有这些–图表的不同设计。 您可以链接其中之一(而不是当前的gray.js)来查看不同的图表设计。 最后一个javascript文件– main.js –我们自己的带有初始化代码的文件。 在我们的演示中，我准备了两个不同的图表，另外–我添加了一种可能性，可以为第一个图表即时更改图表类型，让我们看一下结果html代码：

<!-- Chart type switchers -->
<div class="actions">
    <button class="switcher" id="column">column</button>
    <button class="switcher" id="area">area</button>
    <button class="switcher" id="line">line</button>
    <button class="switcher" id="spline">Spine</button>
    <button class="switcher" id="areaspline">areaspline</button>
</div>
<!-- two different charts -->
<div id="chart_1" class="chart"></div>
<div id="chart_2" class="chart"></div>

<!-- Chart type switchers -->
<div class="actions">
    <button class="switcher" id="column">column</button>
    <button class="switcher" id="area">area</button>
    <button class="switcher" id="line">line</button>
    <button class="switcher" id="spline">Spine</button>
    <button class="switcher" id="areaspline">areaspline</button>
</div>
<!-- two different charts -->
<div id="chart_1" class="chart"></div>
<div id="chart_2" class="chart"></div>

步骤2. CSS (Step 2. CSS)

css / main.css (css/main.css)

There are no any special styles for our charts, but anyway, our demo contains a few customizations (certain width for chart plus customized buttons):

我们的图表没有任何特殊样式，但是无论如何，我们的演示包含一些自定义项(图表的某些宽度加上自定义的按钮)：

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
button {
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 12px;
    margin: 0 5px;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 150px;
}
button:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}
button:active {
    background: none repeat scroll 0 0 #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
}

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}
button {
    background: none repeat scroll 0 0 #E3E3E3;
    border: 1px solid #BBBBBB;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 0 1px 1px #F6F6F6 inset;
    color: #333333;
    font: bold 12px;
    margin: 0 5px;
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: 150px;
}
button:hover {
    background: none repeat scroll 0 0 #D9D9D9;
    box-shadow: 0 0 1px 1px #EAEAEA inset;
    color: #222222;
    cursor: pointer;
}
button:active {
    background: none repeat scroll 0 0 #D0D0D0;
    box-shadow: 0 0 1px 1px #E3E3E3 inset;
    color: #000000;
}

步骤3. JS (Step 3. JS)

Finally, let’s check our initialize javascript code:

最后，让我们检查一下我们的初始化javascript代码：

js / main.js (js/main.js)

// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}
// Two charts definition
var chart1, chart2;
// Once DOM (document) is finished loading
$(document).ready(function() {
    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: 'Tools developers plans to use to make html5 games (in %)'
     },
     xAxis: {
        categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Dev #3',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });
    // Second chart initialization (pie chart)
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the first developer'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: [{
         type: 'pie',
            name: 'Dev #1',
            data: [
                ['Processing.js', 5],
                ['Impact.js', 10],
                ['Other', 20],
                ['Ease.js', 22],
                ['Box2D.js', 25],
                ['WebGL', 28],
                ['DOM', 30],
                ['CSS', 40],
                ['Canvas', 80],
                ['Javascript', 90]
            ]
         }]
    });
    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

// Change Chart type function
function ChangeChartType(chart, series, newType) {
    newType = newType.toLowerCase();
    for (var i = 0; i < series.length; i++) {
        var srs = series[0];
        try {
            srs.chart.addSeries({
                type: newType,
                stack: srs.stack,
                yaxis: srs.yaxis,
                name: srs.name,
                color: srs.color,
                data: srs.options.data
            },
            false);
            series[0].remove();
        } catch (e) {
        }
    }
}
// Two charts definition
var chart1, chart2;
// Once DOM (document) is finished loading
$(document).ready(function() {
    // First chart initialization
    chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'chart_1',
        type: 'column',
        height: 350,
     },
     title: {
        text: 'Tools developers plans to use to make html5 games (in %)'
     },
     xAxis: {
        categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
     },
     yAxis: {
        title: {
           text: 'Interviewed'
        }
     },
     series: [{
        name: 'Dev #1',
        data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
     }, {
        name: 'Dev #2',
        data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
     }, {
        name: 'Dev #3',
        data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
     }]
    });
    // Second chart initialization (pie chart)
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'chart_2',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 350,
        },
        title: {
            text: 'Pie chart diagram for the first developer'
        },
        tooltip: {
            pointFormat: '<b>{point.percentage}%</b>',
            percentageDecimals: 1
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
         series: [{
         type: 'pie',
            name: 'Dev #1',
            data: [
                ['Processing.js', 5],
                ['Impact.js', 10],
                ['Other', 20],
                ['Ease.js', 22],
                ['Box2D.js', 25],
                ['WebGL', 28],
                ['DOM', 30],
                ['CSS', 40],
                ['Canvas', 80],
                ['Javascript', 90]
            ]
         }]
    });
    // Switchers (of the Chart1 type) - onclick handler
    $('.switcher').click(function () {
        var newType = $(this).attr('id');
        ChangeChartType(chart1, chart1.series, newType);
    });
});

In the beginning I prepared a function ‘ChangeChartType’ which will change type of our first chart on-fly. When we click at the buttons – it evokes onClick event, and we call the ‘ChangeChartType’ function and pass the value of ID attribute into this function (as a name of desired chart type). Now, please pay attention how we initialize Highcharts.Chart object. We have to define the object where it should render the chart, type, also we can define xAxis, yAxis and series (this is an array of source data for our chart). You can also follow this link to find official API reference for this library.

在开始时，我准备了一个函数“ ChangeChartType”，它将动态更改我们的第一个图表的类型。 当我们单击按钮时，它会引发onClick事件，然后调用“ ChangeChartType”函数，并将ID属性的值传递给该函数(作为所需图表类型的名称)。 现在，请注意我们如何初始化Highcharts.Chart对象。 我们必须定义应在其中呈现图表，类型的对象，还可以定义xAxis，yAxis和系列(这是图表的源数据的数组)。 您也可以通过此链接找到该库的官方API参考。

现场演示

结论 (Conclusion)

That is all for today. We have just developed a few really powerful charts with Highcharts. I’m sure that this material will be very useful for you. Good luck and welcome back

今天就这些。 我们刚刚使用Highcharts开发了一些非常强大的图表。 我相信这份资料对您将非常有用。 祝你好运，欢迎回来

翻译自: https://www.script-tutorials.com/active-charts-using-highcharts/