javascript - 如何减少 Amcharts 中的悬停线宽度

Question

如何减小 Amchart 中的悬停线宽。这是实时图表的屏幕截图。 .

这是一个DEMO行动中的代码。JavaScript 代码如下所示:

var chartData1 = [];
var chartData2 = [];



generateChartData();

function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() - 500);
    firstDate.setHours(0, 0, 0, 0);

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

        var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
        var a2 = -1 * Math.round(Math.random() * (100 + i)) + 200 + i;

        chartData1.push({
            date: newDate,
            value: a1
        });
        chartData2.push({
            date: newDate,
            value: a2
        });
    }
}

AmCharts.makeChart("chartdiv", {
    type: "stock",

    dataSets: [{
            title: "first data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value"
            }],
            dataProvider: chartData1,
            categoryField: "date"
        },

        {
            title: "second data set",
            fieldMappings: [{
                fromField: "value",
                toField: "value2"
            }],
            dataProvider: chartData2,
            categoryField: "date",
            compared: true
        }
    ],

    panels: [{

            showCategoryAxis: false,
            title: "Data set #1",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g1",
                valueField: "value",
                comparable: true
            }],

            stockLegend: {

            }
        }, {

            showCategoryAxis: true,
            title: "Data set #2",
            recalculateToPercents: "never",
            stockGraphs: [{
                id: "g2",
                valueField: "value2",
                compareField: "value2",
                comparable: true,
                visibleInLegend: false
            }],

            stockLegend: {

            }
        }
    ],

    chartScrollbarSettings: {
        graph: "g1"
    },

    chartCursorSettings: {
        valueBalloonsEnabled: true,
        fullWidth:true,
        cursorAlpha:0.1
    },

    periodSelector: {
        periods: [{
            period: "MM",
            selected: true,
            count: 1,
            label: "1 month"
        }, {
            period: "YYYY",
            count: 1,
            label: "1 year"
        }, {
            period: "YTD",
            label: "YTD"
        }, {
            period: "MAX",
            label: "MAX"
        }]
    }
});

Answer 1

您的演示没有显示宽光标，但您似乎明白了 - 您必须删除 chartCursorSettings 中的 fullWidth: true 以使光标成为正常的窄线而不是宽线一个。