javascript - 哪个 JavaScript 库最适合绘制具有多个系列且每个系列的点数较少的折线图

Question

我需要在 HTML 页面上的单个绘图上绘制 60 个(将来会更多)系列的 25 个点。整个图应该是可缩放和可过滤的(用户应该能够隐藏除所选系列之外的所有系列或仅隐藏所选系列)。

有人知道最适合此类任务的 JavaScript 图表库吗？当前的实现适用于 Highcharts，但它因“隐藏除一个选定的所有系列”功能而窒息。

也许我可以坚持使用 Highcharts，但我确实需要一种方法来快速隐藏除点击的系列之外的所有系列。

更新:

好吧，伙计们，我自己找到了可接受的解决方案。

Answer 1

尝试amCharts.com 这是实现场景的 JS fiddle :jsfiddle.net/zeroin/gqtmN/ 单击图例条目会隐藏所有图表并显示您单击的图表。

以及源代码，按照要求:

var chart;

var chart;
var chartData = [];


function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 60);

    for (var i = 0; i < 25; i++) {
        var newDate = new Date(firstDate);
        newDate.setDate(newDate.getDate() + i);

        var obj = {
            date: newDate
        };

        for (var j = 0; j < 60; j++) {
            obj["val" + j] = Math.round(Math.random() * (j + 1) * 10);
        }
        chartData.push(obj);
    }
}

AmCharts.ready(function() {

    generateChartData();

    chart = new AmCharts.AmSerialChart();
    chart.marginTop = 0;
    chart.autoMarginOffset = 5;
    chart.pathToImages = "http://www.amcharts.com/lib/images/";
    chart.zoomOutButton = {
        backgroundColor: '#000000',
        backgroundAlpha: 0.15
    };
    chart.dataProvider = chartData;
    chart.categoryField = "date";

    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
    categoryAxis.dashLength = 2;
    categoryAxis.gridAlpha = 0.15;
    categoryAxis.axisColor = "#DADADA";


    for (var j = 0; j < 60; j++) {
        var graph = new AmCharts.AmGraph();
        graph.title = "series " + j;
        graph.valueField = "val" + j;
        graph.hidden = true;
        chart.addGraph(graph);
    }

    chart.graphs[0].hidden = false;

    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.cursorPosition = "mouse";
    chart.addChartCursor(chartCursor);

    var chartScrollbar = new AmCharts.ChartScrollbar();
    chart.addChartScrollbar(chartScrollbar);

    var legend = new AmCharts.AmLegend();
    legend.addListener("showItem", handleAll);

    chart.addLegend(legend);
    chart.write("chartdiv");
});


function handleAll(event) {
    for (var j = 0; j < 60; j++) {
        chart.graphs[j].hidden = true;
    }

    event.dataItem.hidden = false;
    chart.validateNow();
}​

免责声明:我是 amCharts 的作者。